Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (130.4 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.ip, .icon div.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
#networks-pane div.confirm_multiple p {
2048
    margin: 7px 0 0 100px;
2049
}
2050

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

    
2058
div.confirm_multiple button.yes {
2059
    border-color: #FF7F2A;
2060
    padding: 0 12px;
2061
}
2062

    
2063
div.confirm_multiple button.yes:hover {
2064
    background-color: #FF7F2A;
2065
}
2066

    
2067
div.confirm_multiple button.no {
2068
    padding: 0px 16px;
2069
}
2070

    
2071
div.confirm_multiple button.no:hover {
2072
    background-color: #5CA1C0;
2073
}
2074

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

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

    
2096
div.action_error .action-error-msg {
2097
    font-size: 0.8em;
2098
}
2099

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

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

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

    
2129
div.action_error button.details:hover {
2130
    background-color: #FF7F2A;
2131
}
2132

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

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

    
2151
div#user a{
2152
    color: #FFFFFF;
2153
    text-decoration: none;
2154
}
2155

    
2156
div#user a.current_lang {
2157
    color: #72ADC8;
2158
}
2159

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

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

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

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

    
2192
div#user .active {
2193
    background-color: #BED5E0 !important;
2194
}
2195

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

    
2201
div#user .useractions {
2202
    display: none;
2203
}
2204

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

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

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

    
2237
div#user .useractions li.hovered {
2238
    background-color: #E1EFF6;
2239
}
2240

    
2241
div#user .useractions li.last {
2242
    border-bottom: none;
2243
}
2244

    
2245
div#user .useractions .logout a {
2246
    background-image: url("../images/icon-logout.png");
2247
}
2248

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

    
2256
div#user .langmenu .sep {
2257
    display: inline-block;
2258
    color: #72ADC8;
2259
}
2260

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

    
2269
#disks.separator {
2270
    background-color: #dea842;
2271
}
2272

    
2273
#networks.separator {
2274
    background-color: #6c535d;
2275
}
2276

    
2277
.network-machine h5 {
2278
    margin-bottom: 20px;
2279
    margin-top:0px;
2280
}
2281

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

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

    
2302
div.editbuttons div.save:hover, div.editbuttons div.cancel:hover {
2303
    background-color: #84b7d0;
2304
}
2305

    
2306
div.editbuttons div.cancel:hover {
2307
    background-image: url("../images/cancel-onhover.png");
2308
}
2309

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

    
2318
.editbuttons .cancel {
2319
    background-image: url("../images/cancel.png");
2320
    margin-left: 3px;
2321
}
2322

    
2323
.editbuttons .save {
2324
    background-image: url("../images/save.png");
2325
    margin-left: 1px;
2326
}
2327

    
2328
.editbuttons img {
2329
    float:none !important;
2330
    margin: 0px !important;
2331
}
2332

    
2333
.network .namecontainer {
2334
    font-size: 1.1em;
2335
}
2336
.network .machine-name-div .namecontainer {
2337
    font-size: 1em;
2338
    font-weight: bold;
2339
}
2340

    
2341

    
2342
.namecontainer .name {
2343
    position: relative;
2344
}
2345

    
2346
.namecontainer .name .nametextbox, .network-rename-input {
2347
    z-index: 1000;
2348
}
2349

    
2350
.icon .nametextbox {
2351
    width: 255px;
2352
}
2353

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

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

    
2373
#machinesview-icon .large-spinner {
2374
    top: 170px;
2375
}
2376

    
2377
.list .large-spinner {
2378
    margin-top:-30px;
2379
}
2380

    
2381
.single .large-spinner {
2382
    margin-top: 50px;
2383
}
2384

    
2385
div#networks-container {
2386
    display: none;
2387
}
2388

    
2389
div#networks-container .large-spinner {
2390
    margin-top: 50px;
2391
}
2392

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

    
2399
div.list div.dataTables_filter input{
2400
    font-size: 100%;
2401
}
2402

    
2403
.dataTables_wrapper {
2404
    width: 515px;
2405
    padding-bottom: 40px;
2406
}
2407

    
2408
div.list table thead .sorting, div.list table thead .sorting_desc, div.list table thead .sorting_asc {
2409
    padding-right: 15px !important;
2410
}
2411

    
2412
div.list table {
2413
    width: 515px;
2414
    font-size: 75%;
2415
}
2416

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

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

    
2441
div.list table thead .sorting_asc, div.list table thead .sorting_desc {
2442
    background-color: #5CA1C0;
2443
}
2444

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

    
2449
div.list table thead .sorting_desc {
2450
    background-image: url("../images/desc.gif");
2451
}
2452

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

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

    
2474
ul.dropdown-selector li {
2475
    padding: 4px;
2476
}
2477

    
2478
ul.dropdown-selector li:hover {
2479
    background-color: #5CA1C0;
2480
}
2481

    
2482
ul.dropdown-selector li a{
2483
    color: black;
2484
    text-decoration: none;
2485
}
2486

    
2487
div.list table span.imagetag {
2488
    display: none;
2489
}
2490

    
2491
div.list table thead .vmos {
2492
    width: 20px !important;
2493
    vertical-align:middle;
2494
}
2495

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

    
2503
div.list table thead .vmflavor {
2504
    width: 100px !important;
2505
}
2506

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

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

    
2517
div.list table thead .vmname {
2518
    width: 110px !important;
2519
}
2520

    
2521
.spinner, .action-indicator {
2522
    clear: right;
2523
    float:right;
2524
    margin: 10px 6px 0 15px;
2525
}
2526

    
2527
.icon .spinner {
2528
    margin: 20px 4px 0 15px !important;
2529
}
2530

    
2531
.single .state .spinner {
2532
    margin: 20px 55px 0 15px !important;
2533
}
2534

    
2535
.action-indicator {
2536
    margin-right: 18px;
2537
}
2538

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

    
2547
.wave {
2548
    clear: right;
2549
    float:right !important;
2550
    margin: 10px 15px 0 15px !important;
2551
}
2552

    
2553
#networks-pane .spinner {
2554
    margin-top: 18px !important;
2555
}
2556

    
2557
.hidden {
2558
    display:none !important; 
2559
}
2560

    
2561
div.actions a.selected, div.actions a.selected:hover, div.machine-actions a.selected, div.machine-actions a.selected:hover {
2562
    display:block !important;
2563
}
2564

    
2565
.action_error .message, .action_error .code {
2566
    display: none;
2567
}
2568

    
2569
.fixed {
2570
    bottom: 0;
2571
    position: fixed !important;
2572
}
2573

    
2574
/* Networks */
2575
#networks-pane {
2576
    background-color: transparent;
2577
    color: black;
2578
}
2579

    
2580
#networkscreate {
2581
}
2582

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

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

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

    
2604
#createcontainer {
2605
}
2606

    
2607
#networks-container {
2608
}
2609

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
2730
div.network-machines, div.firewall {
2731
    font-size: 75%;
2732
    margin-left: 70px;
2733
}
2734

    
2735
div.firewall {
2736
    margin-left: 60px;
2737
    margin-bottom: 3px;
2738
    margin-top: -3px;
2739
}
2740

    
2741
div.firewall .firewall-options {
2742
    float: left;
2743
}
2744

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

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

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

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

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

    
2769
.state {
2770
}
2771

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

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

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

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

    
2806

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

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

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

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

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

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

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

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

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

    
2864
div.network div.display a {
2865
    visibility: visible;
2866
}
2867

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

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

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

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

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

    
2893
.network-logos:hover {
2894
    cursor: pointer;
2895
}
2896

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

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

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

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

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

    
2924
#private-networks {
2925
    margin-top: 20px;
2926
}
2927

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

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

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

    
2942
.private-networks .state {
2943
}
2944

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

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

    
2960
span.rename-network {
2961
    cursor: pointer;
2962
}
2963

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

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

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

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

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

    
3002
.network-machine .state div {
3003
    text-align: left;
3004
}
3005

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

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

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

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

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

    
3043
.network-machine .state {
3044
    margin-right: 18px;
3045
}
3046

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

    
3051
.machine-name .name {
3052
}
3053

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

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

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

    
3069
div.empty-network-slot {
3070
    height: 60px;
3071
}
3072

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

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

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

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

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

    
3104
.firewall-on {
3105
    color: #42E342;
3106
}
3107

    
3108
.firewall-off {
3109
    color: #F82E2E;
3110
}
3111

    
3112
.firewall-content {
3113
    color: black;
3114
    font-size: 60%;
3115
    margin-left: 60px;
3116
    height: 55px;
3117
}
3118

    
3119
.firewall-content .checkbox-legends {
3120
    cursor: pointer;
3121
}
3122

    
3123
.firewall-content .checkbox-legends.current {
3124
    font-weight: bold;
3125
}
3126

    
3127
.firewall-content .checkbox-legends {
3128
    vertical-align: text-top;
3129
}
3130

    
3131
.checkbox-legends a {
3132
    color: black;
3133
    text-decoration: underline;
3134
    font-size: 100%;
3135
}
3136

    
3137
h5.machine-connect {
3138
    font-size: 75%;
3139
    margin-bottom: 3px;
3140
    height: 23px;
3141
}
3142

    
3143
.machine-connect span {
3144
    text-decoration: underline;
3145
}
3146

    
3147
h5.machine-connect span:hover {
3148
    cursor: pointer;
3149
}
3150

    
3151
.firewall-apply {
3152
    background-color: #4085a5;
3153
    border: medium none;
3154
    float: right;
3155
    font-size: 105%;
3156
    height: 18px;
3157
    margin-right: 5px;
3158
    margin-top: 3px;
3159
    width: 75px;
3160
    position: relative;
3161
    bottom:20px;
3162
}
3163

    
3164
.firewall-apply:hover {
3165
    background-color:#5CA1C0;
3166
}
3167

    
3168
.name-div {
3169
    margin: -9px 0 30px 70px;
3170
}
3171

    
3172
.machine-name-div {
3173
    margin-bottom: 20px;
3174
    margin-left: 60px;
3175
}
3176

    
3177
div.reboot-dialog {
3178
    display: none;
3179
    color: black;
3180
    background-color: #4085A5;
3181
    font-size: 75%;
3182
    margin-top: 15px;
3183
    width: 698px;
3184
    z-index: 1;
3185
}
3186

    
3187
div#reboot-machine-template, div.reboot-machine-entry {
3188
    display: none;
3189
    padding: 0 0 10px 35px;
3190
    width: 300px;
3191
}
3192

    
3193
div.reboot-dialog p {
3194
    color: #FFFFFF;
3195
    padding: 10px 0 10px 10px;
3196
}
3197

    
3198
div.reboot-dialog button {
3199
    float:right;
3200
    border: 1px solid #FF7F2A;
3201
    background-color: transparent;
3202
    font-size:100%;
3203
}
3204

    
3205
div.reboot-dialog button:hover {
3206
    background-color: #FF7F2A;
3207
}
3208

    
3209
div.reboot-dialog button.reboot-all {
3210
    margin: -30px 35px 0 0;
3211
}
3212

    
3213
div.reboot-dialog button.reboot-single {
3214
    color: black;
3215
    margin-top: -20px;
3216
}
3217

    
3218
div.reboot-dialog div.code, div.reboot-dialog div.action, div.reboot-dialog div.message, div.reboot-dialog button.details {
3219
    display:none;
3220
}
3221

    
3222
div.reboot-dialog button.details {
3223
    border-color: #800000;
3224
    margin-top: -20px;
3225
}
3226

    
3227
div.reboot-dialog button.details:hover {
3228
    background-color: #800000;
3229
}
3230

    
3231
/* Metadata */
3232
.machine .info-content {
3233
    display: none;
3234
}
3235

    
3236
.metadata-container {
3237
    line-height: 12px;
3238
    height: 85px;
3239
    background-color: #84b7d0;
3240
}
3241

    
3242
.metadata-column {
3243
    border-right: 1px solid #5CA1C0;
3244
    color: black;
3245
    float: left;
3246
    font-size: 60%;
3247
    margin-top: 3px;
3248
    height: 70px;
3249
    padding-bottom: 5px;
3250
}
3251

    
3252
.vm-stats {
3253
    padding-left: 10px;
3254
    padding-right: 5px;
3255
    width: 220px;
3256
}
3257

    
3258
.vm-stats div.stat-content {
3259
    height: 18px;
3260
}
3261

    
3262
.vm-stats div.stat-content img {
3263
    margin: 0;
3264
}
3265

    
3266
.vm-stats div img.stat-busy {
3267
    margin-top: -7px;
3268
    margin-left: 90px;
3269
}
3270

    
3271
.vm-stats div.stat-content img.busy {
3272
    margin-left: 95px;
3273
}
3274

    
3275
.vm-stats div.stat-error {
3276
    display:none;
3277
}
3278

    
3279
div.stat-error {
3280
    color: #f00;
3281
}
3282

    
3283
.single div.stat-error {
3284
    text-align: center;
3285
    font-size: 0.8em;
3286
}
3287

    
3288
.metadata-column {
3289
    margin-top: 4px;
3290
}
3291

    
3292
.vm-details {
3293
    width: 130px;
3294
    margin-left:17px;
3295
}
3296

    
3297
.vm-details.metadata-column {
3298
    padding-top: 5px;
3299
    height: 65px;
3300
}
3301

    
3302
.vm-details .image-details {
3303
    margin-top: 8px;
3304
}
3305

    
3306
.vm-details .vm-detail {
3307
    display: block;
3308
}
3309

    
3310
.vm-details span.value {
3311
    color: #444;
3312
}
3313

    
3314
.single-container .lower .stat-busy {
3315
    margin-top: 10px;
3316
    margin-left: 325px;
3317
}
3318

    
3319
.vm-metadata {
3320
    padding-left: 10px;
3321
    width: 100px;
3322
    border: none;
3323
}
3324

    
3325
.metadata-left {
3326
}
3327

    
3328
.metadata-right {
3329
    width: 73px;
3330
    float:left;
3331
    height: 35px;
3332
    padding-left: 5px;
3333
    position:relative;
3334
    overflow:hidden;
3335
}
3336

    
3337
.metadata-right .items {
3338
    position:absolute;
3339
    height:20000em;
3340
}
3341

    
3342
.metadata-keys-container {
3343
    height: 60px;
3344
    float: left;
3345
}
3346

    
3347
.single .metadata-keys-container {
3348
    float: none;
3349
    height: auto;
3350
    margin-bottom: 5px;
3351
}
3352

    
3353
.single a.manage-metadata {
3354
    font-size: 80%;
3355
    margin-left:4px;
3356
    color: #383838;
3357
}
3358

    
3359
a.manage-metadata, a.stats-report {
3360
    font-size: 100%;
3361
    color: black;
3362
    margin-left:17px;
3363
    text-decoration: underline;
3364
}
3365

    
3366
a.stats-report {
3367
    margin: 15px 0  0 80px;
3368
}
3369

    
3370
div.machine a.manage-metadata:hover {
3371
    background-color: transparent;
3372
}
3373

    
3374
.single .metadata-actions, .single .metadata-keys-container .items {
3375
    padding-left: 5px;
3376
}
3377
.metadata-actions, .metadata-keys-container .items{
3378
    margin-top: 5px;
3379
}
3380

    
3381
.singe .metadata-actions, .single .metadata-keys-container .items{
3382
    font-size: 80%;
3383
    line-height: 12px;
3384
    width: 300px;
3385
}
3386

    
3387
.metadata-actions .prev,  .metadata-actions .next{
3388
    float:left;
3389
    width:29px;
3390
    height:6px;
3391
    cursor: pointer;
3392
}
3393

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

    
3398
.metadata-actions .next {
3399
    background: url("../images/roll-down.png") no-repeat scroll 0 0 transparent;
3400
}
3401

    
3402
.scrollable {
3403
    position:relative;
3404
    overflow:hidden;
3405
    height: 35px;
3406
    width: 120px;
3407
    margin-bottom:2px;
3408
}
3409

    
3410
.scrollable .items {
3411
    position:absolute;
3412
    height:20000em;
3413
}
3414

    
3415
/* single view */
3416
.single {
3417
    color: #383838;
3418
}
3419

    
3420
.single .column1 {
3421
    float: left;
3422
    margin: 1px 0 25px 17px;
3423
    width: 140px;
3424
}
3425

    
3426
.single .column1 .state {
3427
    float: left;
3428
    margin-left: 4px;
3429
    padding-bottom: 6px;
3430
    padding-top: 3px;
3431
    position: relative;
3432
    right: 0;
3433
    text-align: center;
3434
    width: 126px;
3435
}
3436

    
3437
.single .column1 .state-label {
3438
    padding-top: 5px;
3439
}
3440

    
3441
.single .column1 .indicators {
3442
    margin-right: 38px !important;
3443
}
3444

    
3445
.single div.connect-arrow {
3446
    margin-left: -17px;
3447
}
3448

    
3449
.single div.connect-border {
3450
    margin-left: -29px;
3451
}
3452

    
3453
.single .single-actions {
3454
    width: 150px;
3455
    height: 60px;
3456
    margin-bottom: 45px;
3457
    margin-left: -10px;
3458
}
3459

    
3460
.single .vm-actions .action-container {
3461
    margin-bottom: 1px;
3462
}
3463

    
3464
.single .vm-actions .action-container .confirm_single {
3465
    right: -45px;
3466
}
3467

    
3468
.single .vm-actions .action-container.destroy .confirm_single {
3469
}
3470

    
3471
.single .vm-actions .action-container.destroy {
3472
    bottom: -20px;
3473
}
3474

    
3475
.single a.single-action {
3476
    text-decoration: none;
3477
    cursor: pointer;
3478
    display: block;
3479
}
3480

    
3481
.single a.single-action:hover {
3482
    background-color:#A1C8DB;
3483
    width: 162px;
3484
    opacity: 0.8;
3485
    filter: alpha(opacity = 80);
3486
}
3487

    
3488
.single .destroy a.single-action.selected {
3489
    color: #880000 !important;
3490
}
3491

    
3492
.single a.single-action.selected {
3493
    color: #FF7F2A !important;
3494
    width: 50px !important;
3495
}
3496

    
3497
.single a.single-action.selected:hover {
3498
    background-color:transparent;
3499
}
3500

    
3501
.single .spinner, .single .action-indicator {
3502
    margin: 15px 45px 0 0px !important
3503
}
3504

    
3505
.single .action-indicator {
3506
    margin-right: 55px !important;
3507
}
3508

    
3509
.single .wave {
3510
    margin: 15px 53px 0 0px !important
3511
}
3512

    
3513
.icon div.action_error {
3514
    font-size: 100%;
3515
}
3516

    
3517
.single div.action_error {
3518
    position: absolute;
3519
    top: 29px;
3520
    right: 35px;
3521
}
3522

    
3523
.single .column2 {
3524
    background-color: #A1C8DB;
3525
    float: left;
3526
    font-size: 78%;
3527
    line-height: 17px;
3528
    margin: 0 0 10px 5px;
3529
    width: 358px;
3530
}
3531

    
3532
.single .column2 .machine-labels {
3533
    float: left;
3534
    font-size: 90%;
3535
    margin-left: 10px;
3536
    margin-top: 10px;
3537
    width: 125px;
3538
}
3539

    
3540
.single .machine-detail.title {
3541
    background-color: #74AEC9;
3542
    color: #fff;
3543
    padding: 4px 6px;
3544
    font-size: 0.8em;
3545
    width: 346px;
3546
    margin-left: 5px;
3547
    float: left;
3548
}
3549

    
3550
.single .column2 .machine-details {
3551
    float: right;
3552
    text-align: right;
3553
    font-size: 90%;
3554
    width: 210px;
3555
    margin-right: 10px;
3556
    margin-top: 10px;
3557
}
3558

    
3559
.single .column2 .name, .single .column2 .disk, .single .column2 .image-size, .single .column2 .ipv6 {
3560
    margin-bottom: 13px;
3561
}
3562

    
3563
.single .tags {
3564
    clear: both;
3565
    margin-bottom: 10px;
3566
    margin-left: 10px;
3567
}
3568

    
3569
.single .tags-label {
3570
    float: left;
3571
    padding: 0 5px;
3572
    width: 30px;
3573
}
3574

    
3575
.single .tags-down-arrow {
3576
    background: url("../images/tags-down-arrow.png") no-repeat scroll 1px 7px transparent;
3577
    float: left;
3578
    height: 16px;
3579
    width: 9px;
3580
}
3581

    
3582
.single .tags-header .info-header{
3583
    padding-top:0;
3584
    padding-bottom:0;
3585
}
3586

    
3587
.single .tags-header {
3588
    font-size: 0.62em;
3589
    cursor: pointer;
3590
    float: left;
3591
    margin-bottom:5px;
3592
}
3593

    
3594
.single .tags-header span.label {
3595
    font-size: 104%;
3596
}
3597

    
3598
.single .tags-content {
3599
    background-color: #84B7D0;
3600
    clear: both;
3601
    height: auto;
3602
    padding-bottom: 5px;
3603
    padding-top: 5px;
3604
    width: 300px;
3605
}
3606

    
3607
.single .column3 {
3608
    background-color: #A1C8DB;
3609
    width: 150px;
3610
    overflow: visible;
3611
    padding-bottom: 10px;
3612
    position: absolute;
3613
    right: 20px;
3614
    top: 130px;
3615
}
3616

    
3617
.single .col3 {
3618
    float: right;
3619
    width: 150px;
3620
    margin-right: 15px;
3621
    margin-bottom: 15px;
3622
}
3623

    
3624
.single .column3 .controls {
3625
    font-size: 80%;
3626
    height: 20px;
3627
    padding-left: 7px;
3628
    padding-right: 7px;
3629
    padding-top: 8px;
3630
    padding-bottom: 5px;
3631
    border-bottom: 1px solid #84B7D0;
3632
}
3633

    
3634
.single .column3 .vm-control:hover {
3635
    background-color: #5CA1C0;
3636
}
3637

    
3638
.single .column3 .previous {
3639
    float:left;
3640
    width: 72px;
3641
}
3642

    
3643
.single .column3 .next {
3644
    float: right;
3645
    text-align: center;
3646
    width: 60px;
3647
}
3648

    
3649
.single .column3 .next-label {
3650
    float: right;
3651
    margin-right: 3px;
3652
    margin-top: -2px;
3653
}
3654

    
3655
.single .column3 .next-arrow {
3656
    float: right;
3657
    height: 18px;
3658
    width: 10px;
3659
    background: url("../images/right-arrow.png") no-repeat scroll 3px 2px transparent;
3660
}
3661

    
3662
.single .column3 .prev-label {
3663
    float: left;
3664
    margin-left: 3px;
3665
    margin-top: -2px;
3666
}
3667

    
3668
.single .column3 .prev-arrow {
3669
    background: url("../images/left-arrow.png") no-repeat scroll 3px 2px transparent;
3670
    float: left;
3671
    height: 18px;
3672
    width: 10px;
3673
}
3674

    
3675
.single .column3 .separator {
3676
    width: 135px;
3677
    height: 1px;
3678
    background-color: #84B7D0;
3679
    margin: 0 0 0 7px;
3680
    clear: both;
3681
}
3682

    
3683
.single .column3 .servers {
3684
    font-size: 80%;
3685
    line-height: 15px;
3686
    padding-top: 10px;
3687
    text-align: right;
3688
    overflow: visible;
3689
    position: relative;
3690
}
3691

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

    
3712
.single .toggler {
3713
    color: #FFFFFF;
3714
    float: right;
3715
    font-size: 140%;
3716
}
3717

    
3718
.single .cpu-usage, .single .network-usage {
3719
    text-align: center;
3720
    padding-top: 15px;
3721
    margin-bottom: 5px;
3722
    font-size: 90%;
3723
    font-weight: bold;
3724
}
3725

    
3726
.single .cpu-graph, .single .network-graph {
3727
    margin-left: 20px;
3728
    margin-bottom:30px;
3729
    width: 660px;
3730
}
3731

    
3732
.single div.lower .stats-select .stats-select-option.selected {
3733
    background-color: #4085A5;
3734
    color: #fff;
3735
}
3736

    
3737
.single div.lower .stats-select .stats-select-option {
3738
    cursor: pointer;
3739
    background-color: #DDF1FB;
3740
    color: #4085A5;
3741
    display: block;
3742
    float: left;
3743
    padding: 7px 10px;
3744
    font-size: 0.7em;
3745
}
3746

    
3747
.single div.lower img.stats {
3748
    margin-left: 82px;
3749
}
3750

    
3751
.single div.lower img.stats {
3752
    display: none;
3753
}
3754

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

    
3765
.single .single-image-state1 {
3766
    background-position: 0px 0;
3767
}
3768

    
3769
.single .single-image-state3 {
3770
    background-position: -252px 0;
3771
}
3772

    
3773
.single .single-image-state4 {
3774
    background-position: -378px 0;
3775
}
3776

    
3777
.single .single-image-state2 {
3778
    background-position: -126px 0;
3779
}
3780

    
3781
.single .column3 .previous, .single .column3 .next {
3782
    cursor: pointer;
3783
    background-color: #84B7D0;
3784
    color: white;
3785
    font-size: 100%;
3786
    height: 15px;
3787
    padding-top: 2px;
3788
}
3789

    
3790
.single .column3 .disabled {
3791
    opacity: 0.5;
3792
    filter: alpha(opacity = 50);
3793
}
3794

    
3795
.single div.lower {
3796
    clear:both;
3797
    background: #EFF7FA repeat scroll 0 0;
3798
    width: 700px;
3799
    padding-bottom: 15px;
3800
}
3801

    
3802
.single div.upper {
3803
    background: transparent;
3804
    margin-bottom: 10px;
3805
    overflow: visible;
3806
    overflow: hidden;
3807
    width: 700px;
3808
    background: #EFF7FA repeat scroll 0 0;
3809
}
3810

    
3811
/* console css */
3812
.console-header-logo {
3813
    padding-top: 16px;
3814
    margin-left: 30px;
3815
    position: fixed;
3816
}
3817

    
3818
.console-header-logo img {
3819
    max-width:100%;
3820
    max-height:65px;
3821
}
3822

    
3823
#console-header div.help-text {
3824
    font-size: 70%;
3825
    font-weight:bold;
3826
    color:#FFFFFF;
3827
    position: absolute;
3828
    height: 20px;
3829
    top: 79px;
3830
}
3831

    
3832
div.console-container {
3833
    margin: 0 0em;
3834
    height: auto;
3835
}
3836

    
3837
#wrapper.console {
3838
    width: auto;
3839
}
3840

    
3841
.console-info {
3842
    font-size:80%;
3843
    color: white;
3844
    position:absolute;
3845
    margin: 15px 0 0 480px;
3846
}
3847

    
3848
applet {
3849
    width:100%;
3850
    height:100%;
3851
}
3852

    
3853
div.console-footer {
3854
    /* this is for version 0.5*/
3855
    display: none;
3856
}
3857

    
3858
.console-footer #footer-text{
3859
    float:left;
3860
    left: auto;
3861
    margin-left:30px;
3862
}
3863

    
3864
/* add network wizard (see also #wizard for shared classes) */
3865
#networks-wizard .header {
3866
    background-color: #4085A5;
3867
    height: 56px;
3868
}
3869

    
3870
#networks-wizard div.name-input {
3871
    margin: 75px 0 0 55px;
3872
}
3873

    
3874
#networks-wizard input {
3875
    border: 1px solid #CCCCCC;
3876
    color: #445566;
3877
    letter-spacing: 1px;
3878
    width: 170px;
3879
}
3880

    
3881
#networks-wizard span.help {
3882
    font-style: italic;
3883
    font-size: 80%;
3884
    margin-left: 10px;
3885
}
3886

    
3887
#networks-wizard .separator-end {
3888
    background-color: #387693;
3889
    height: 6px;
3890
    width: 479px;
3891
    margin-left: -13px;
3892
    margin-top: 19px;
3893
}
3894

    
3895
.red {
3896
    color: red;
3897
}
3898

    
3899
/* add server to network wizard (see also #metadata-wizard for shared classes) */
3900
#add-machines-wizard span.machine-name {
3901
    margin-left: 4px;
3902
    vertical-align: text-top;
3903
}
3904

    
3905
#add-machines-wizard img.list-logo {
3906
    margin: 2px 1px 1px;
3907
}
3908

    
3909
.css-panes {
3910
    clear: both;
3911
    position: relative;
3912
    z-index: 10;
3913
}
3914

    
3915
.last .firewall-content {
3916
}
3917

    
3918
#pub .last .network-separator {
3919
    display:none;
3920
}
3921

    
3922
.public-networks .empty-network-slot {
3923
    display: none;
3924
}
3925

    
3926
.clearfix {
3927
    display: block;
3928
    width: auto;
3929
    zoom: 1;
3930
}
3931

    
3932
/* float clearing for all browsers except the devil one */
3933
.clearfix:after{
3934
  clear: both;
3935
  content: ".";
3936
  display: block;
3937
  height: 0;
3938
  visibility: hidden;
3939
  font-size: 0;
3940
}
3941

    
3942
* html .clearfix {
3943
    display: inline-block;
3944
}
3945

    
3946
.icon .cont-toggler {
3947
    margin-top: -1px;
3948
}
3949

    
3950
.icon .wave {
3951
    margin-right: 4px !important;
3952
    margin-top: 15px !important;
3953
}
3954

    
3955
.icon .status {
3956
    margin-right: 3px;
3957
}
3958

    
3959
#machinesview .status, .single .state {
3960
    font-size: 75%;
3961
}
3962

    
3963
#machinesview-list div.action-indicator {
3964
    margin:0 !important;
3965
    float: none !important;
3966
}
3967

    
3968
.icon div.action-indicator {
3969
    margin-top: 14px;
3970
    margin-right: 4px;
3971
}
3972

    
3973
div.action-indicator {
3974
    width: 15px;
3975
    height: 20px;
3976
    background-repeat: no-repeat;
3977
    background-position: 0 0;
3978
}
3979

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

    
4000
h3.overlay-inner-title {
4001
    color: #4085A5;
4002
    font-size: 2em;
4003
}
4004

    
4005
#add-name-container {
4006
    margin-bottom: 10px;   
4007
}
4008

    
4009
.remove-field-trigger, .add-field-trigger {
4010
    cursor: pointer;
4011
}
4012

    
4013
.add-field-trigger img {
4014
    vertical-align: middle;
4015
}
4016

    
4017
.machine-now-building {
4018
    padding-right: 15px !important;
4019
    text-align: justify;
4020
}
4021

    
4022
.sub-text {
4023
    padding-top: 15px;
4024
    padding-right: 15px;
4025
    text-align: justify;
4026
    font-style: italic;
4027
    font-size: 0.8em !important;
4028
}
4029

    
4030
#notification-box a {
4031
    color: #4085A5;
4032
}
4033

    
4034
#notification-box .machine-title img {
4035
    vertical-align: middle;
4036
}
4037

    
4038
#notifiaction-box .password-header {
4039
    margin-bottom: 0 !important;
4040
}
4041

    
4042
#notification-box .password-container a {
4043
    color: #fff;
4044
    text-decoration: underline;
4045
}
4046

    
4047
#notification-box .password-container a:hover {
4048
    background-color: #fff;
4049
    color: #4085A5;
4050
}
4051

    
4052
#notification-box .password-container {
4053
    background: #4085A5;
4054
    border: none;
4055
}
4056

    
4057
#notification-box .password-container .password a {
4058
    font-weight: normal !important;
4059
}
4060

    
4061
#notification-box .cmd {
4062
    color: #fff;
4063
    font-family: monospace;
4064
    font-size: 1.6em;
4065
}
4066

    
4067
.machine-container .separator {
4068
    background-color: #B0D1E0;
4069
}
4070

    
4071
#creation-password-overlay div.password-cont {
4072
    margin: 10px auto;
4073
    padding: 10px;
4074
    border: 2px solid #75B54A;
4075
    background-color: #AADE87;
4076
    color: #447821;
4077
    text-align: left;
4078
    padding-left: 5em;
4079
    position: relative;
4080
}
4081

    
4082
#creation-password-overlay {
4083
    position: relative;
4084
}
4085

    
4086
#creation-password-overlay .form-action {
4087
    position: absolute;
4088
    bottom: 15px;
4089
    right: 13px;
4090
    font-size: 0.8em;
4091
}
4092

    
4093
#creation-password-overlay .password-label {
4094
    float: left;
4095
}
4096

    
4097
#creation-password-overlay .password {
4098
    font-size: 1.5em;
4099
    font-weight: bold;
4100
    letter-spacing: 2px;
4101
    font-family: Georgia, Times, serif;
4102
    margin-right: 5em;
4103
    float: right;
4104
    margin-top: -4px;
4105
}
4106

    
4107
.feedback-form .description {
4108
    margin-bottom: 25px;
4109
}
4110

    
4111
.feedback-form label {
4112
    display: block;
4113
    font-weight: bold;
4114
    margin-bottom: 10px;
4115
    font-size: 0.8em;
4116
}
4117

    
4118
.feedback-form .form-actions {
4119
    border-top: none;
4120
}
4121

    
4122
.nospace {
4123
    padding-top: 0 !important;
4124
    padding-bottom: 0 !important;
4125
}
4126

    
4127
.noborder {
4128
    border-top: none !important;
4129
    border-bottom: none !important;
4130
}
4131

    
4132
.overlay .feedback-form .messages.description {
4133
    padding-bottom:0;
4134
    margin-bottom: 0;
4135
}
4136

    
4137
.feedback-form .messages .error-message {
4138
    color: #f00;
4139
}
4140

    
4141
.feedback-form .messages .success-message {
4142
    color: #8AA87F;
4143
}
4144

    
4145
.feedback-form .feedback-message {
4146
    width: 548px;
4147
    height: 200px;
4148
    border: 1px solid #ddd;
4149
    padding: 5px;
4150
}
4151

    
4152
#feedback-form .empty-error-msg {
4153
    display: none;
4154
}
4155

    
4156
#feedback-form .data-text {
4157
    display: none;
4158
}
4159

    
4160
#feedback-form .message {
4161
    display: none;
4162
}
4163

    
4164
#feedback-form label {
4165
    display: block;
4166
    font-size: 0.85em;
4167
    font-weight: bold;
4168
}
4169

    
4170
#feedback-form label.inline {
4171
    display: inline;
4172
    padding-left: 5px;
4173
}
4174

    
4175
#feedback-form p {
4176
    padding: 1em 0;
4177
    color: #444;
4178
    margin-bottom: 10px;
4179
}
4180

    
4181
#feedback-form .description {
4182
    font-style: italic;
4183
    font-size: 0.9em;
4184
    color: #888;
4185
}
4186

    
4187
#feedback-form .feedback-text {
4188
    width: 98%;
4189
    height: 100px;
4190
    margin-top: 10px;
4191
    margin-bottom: 10px;
4192
}
4193

    
4194
#feedback-form .submit-data {
4195
    display: none;
4196
}
4197

    
4198
#feedback-form .submit, #invform .submit {
4199
    background-color: #4085A5;
4200
    color: #fff;
4201
    border: none;
4202
    padding: 5px 16px;
4203
    cursor: pointer;
4204
    font-size: 1em;
4205
    position: relative;
4206
}
4207

    
4208
#feedback .submit {
4209
    float: right;
4210
    right: 10px;
4211
    margin-top: 10px;
4212
}
4213

    
4214

    
4215
#feedback-form .submit:hover, #invform .submit:hover {
4216
    background-color: #549FC3;
4217
}
4218

    
4219
.feedback-intro {
4220
    padding-right: 15px !important;
4221
    text-align: justify;
4222
}
4223

    
4224
.popup-body .message {
4225
    padding: 20px 5px;
4226
    display: none;
4227
}
4228

    
4229
.popup-body .loading {
4230
    color: #fff;
4231
}
4232

    
4233
.popup-body .success {
4234
    color: #1F921A;
4235
}
4236

    
4237
.popup-body .errormsg {
4238
    color: #E32424;
4239
}
4240

    
4241

    
4242
.close-msg-box {
4243
    display: block;
4244
    margin-top: 10px;
4245
    cursor: pointer;
4246
    color: #4085A5;
4247
    text-decoration: underline;
4248
}
4249

    
4250

    
4251
.console .ip-version-label {
4252
    margin: 0 5px;
4253
}
4254

    
4255
.ipv6-text, .ipv4-text {
4256
    font-size: 0.9em;
4257
}
4258

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

    
4268
/*404 and 500 pages*/
4269

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

    
4276
.error_page h1 {
4277
    font-weight: normal;
4278
}
4279

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

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

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

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

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

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

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

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

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

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

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

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

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

    
4355
.error_404 .http_error .code {
4356
    letter-spacing: -7px;
4357
}
4358

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

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

    
4370

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

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

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

    
4387
.running .scrollable, .terminated .scrollable {
4388
    height: 42px;
4389
}
4390

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

    
4399
.items .tag-item .value {
4400
    color: #444;
4401
}
4402

    
4403
#machinesview-list {
4404
    display: none;
4405
}
4406

    
4407
#machinesview-single {
4408
    position: relative;
4409
    display: none;
4410
}
4411

    
4412
#machinesview-icon {
4413
    display: none;
4414
}
4415

    
4416
#machinesview-icon, #machinesview-single, #machinesview-list {
4417
    
4418
}
4419

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

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

    
4437
.slider .slider-point-light {
4438
    background-color: transparent;
4439
}
4440

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

    
4453
.slider .handle {
4454
    z-index: 50;
4455
}
4456

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

    
4464
.api_overlay_template {
4465
    display: none;
4466
}
4467

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

    
4473
#disks-pane {
4474
    margin-top: 58px;
4475
}
4476

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

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

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

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

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

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

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

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

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

    
4539
.overlay {
4540
    display: none;
4541
}
4542

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

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

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

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

    
4569
.overlay.overlay-createvm {
4570
    width: 640px;
4571
}
4572

    
4573
.overlay a {
4574
    color: #387693;
4575
}
4576

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

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

    
4595
.overlay .overlay-content .important {
4596
    color: #800000;
4597
}
4598

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

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

    
4613
.overlay .overlay-content .empty-message {
4614
    margin-bottom: 5px;
4615
}
4616

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

    
4626
.overlay h3.overlay-header .title {
4627
    float: left;
4628
}
4629

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

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

    
4649
.overlay .message {
4650
}
4651

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

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

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

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

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

    
4687
.overlay-error .container {
4688
    padding-top: 1.9em;
4689
}
4690

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

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

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

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

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

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

    
4730
.overlay-error .nav-btn:hover {
4731
    
4732
}
4733

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

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

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

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

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

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

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

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

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

    
4793
.msg-log-entry.warning {
4794
    color: #E57F01;
4795
}
4796

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

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

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

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

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

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

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

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

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

    
4840
.overlay-info .overlay-header .title {
4841
    color: #fff;
4842
}
4843

    
4844
.overlay-info .overlay-header .closeme {
4845
    color: #fff;
4846
}
4847

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

    
4855
#loading-view .header.off {
4856
    color: #829096;
4857
}
4858

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

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

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

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

    
4884
#loading-view .info {
4885
    color: #ddd;
4886
}
4887

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

    
4893
.options-list.five li {
4894
    float: left;
4895
    display: block;
4896
    width: 20%;
4897
    margin-bottom: 5px;
4898
}
4899

    
4900
.options-list.five li:nth-child(5n) .options-object-cont {
4901
    margin-right: 0;
4902
}
4903

    
4904
.options-object-cont input {
4905
    border: 1px solid #aaa;
4906
    width: 92px;
4907
    padding: 0;
4908
    margin: 0;
4909
    margin-top:3px;
4910
    padding: 2px;
4911
}
4912

    
4913
.options-list.three li {
4914
    float: left;
4915
    display: block;
4916
    width: 33%;
4917
    margin-bottom: 5px;
4918
}
4919

    
4920
.meta-list .options-list li.options-object.create .options-object-cont {
4921
    background-image: url("../images/option-action-add.png");
4922
    background-repeat: no-repeat;
4923
    background-position: 90px 5px;
4924
}
4925

    
4926
.meta-list .options-list li .options-object-cont .option-action,
4927
.meta-list .options-list li.options-object.create {
4928
    cursor: pointer !important;
4929
}
4930

    
4931
.meta-list .options-list li .options-object-cont {
4932
    cursor: inherit;
4933
}
4934

    
4935
.options-list li .options-object-cont {
4936
    padding: 5px;
4937
    margin-right: 4px;
4938
    border: 1px solid #A6D1E6;
4939
    cursor: pointer;
4940
    min-height: 35px;
4941
    position: relative;
4942
}
4943

    
4944
.options-list.three li:nth-child(3n) .options-object-cont {
4945
    margin-right: 0;
4946
}
4947

    
4948
.options-list li.selected .options-object-cont {
4949
    background-color: #efefef;
4950
    border: 2px solid #4085A5;
4951
    padding: 4px;
4952
}
4953

    
4954
.options-list li.selected .options-object-cont .title {
4955
}
4956

    
4957
.options-list li.options-object .title {
4958
    display: block;
4959
    color: #FF7F2A;
4960
    margin-bottom: 2px;
4961
}
4962

    
4963
.options-list li .option-action {
4964
    display: none;
4965
    position: absolute;
4966
    background-repeat: no-repeat;
4967
}
4968

    
4969
.options-list.five li.editing {
4970
    width: 40%;
4971
}
4972

    
4973
.options-list.five li.editing .value {
4974
    display: none;
4975
}
4976

    
4977
.options-list li .remove {
4978
    background-image: url("../images/option-action-remove.png");
4979
    width:10px;
4980
    height:10px;
4981
    right:5px;
4982
    top: 5px;
4983
}
4984

    
4985
.options-list li .edit {
4986
    background-image: url("../images/option-action-edit.png");
4987
    width:10px;
4988
    height:10px;
4989
    right:5px;
4990
    bottom: 8px;
4991
}
4992

    
4993
.options-list li:hover .option-action  {
4994
    display: block;
4995
}
4996

    
4997
.options-list li.options-object .value {
4998
    color: #4085A5;
4999
    margin-top: 5px;
5000
    display: block;
5001
}
5002

    
5003
.options-list li.selected.options-object .value {
5004
}
5005

    
5006
.options-list li .options-object-cont:hover {
5007
    background-color: #fff;
5008
}
5009

    
5010
.options-list li.selected .options-object-cont:hover {
5011
    background-color: #fff;
5012
}
5013

    
5014
.options-list li img {
5015
    float: left;
5016
    margin:2px;
5017
    margin-right: 10px;
5018
    padding-bottom:10px;
5019
}
5020

    
5021
#network-vms-select-content li.options-object .value {
5022
    margin-top: 10px;
5023
    margin-left: 30px;
5024
}
5025

    
5026
#network-vms-select-content li.options-object:hover .options-object-cont,
5027
#network-vms-select-content li.options-object .options-object-cont {
5028
    background-image: url("../images/option-action-add-dark.png");
5029
    background-repeat: no-repeat;
5030
    background-position: 160px 28px;
5031
}
5032

    
5033
#network-vms-select-content li.selected:hover .options-object-cont,
5034
#network-vms-select-content li.selected .options-object-cont {
5035
    background-image: url("../images/option-action-remove.png") !important;
5036
}
5037

    
5038
#metadata-overlay-content .view .value {
5039
    margin-top: 10px;
5040
}
5041

    
5042
#metadata-overlay-content {
5043
    position: relative;
5044
}
5045

    
5046
.vm-meta .editor .predefined .predefined-meta-key:hover {
5047
    background-color: #4e8eac;
5048
    color: #fff;
5049
}
5050

    
5051
.vm-meta .editor .predefined .predefined-meta-key {
5052
    float: left;
5053
    margin-right: 5px;
5054
    padding: 4px;
5055
    display: block;
5056
    cursor: pointer;
5057
}
5058

    
5059
.vm-meta .editor .predefined {
5060
    background-color: #A6D1E6;
5061
    font-size: 0.9em;
5062
    border-top: 1px solid #ddd;
5063
}
5064

    
5065
.vm-meta .editor input {
5066
}
5067
.vm-meta .editor {
5068
    margin-bottom: 10px;
5069
}
5070

    
5071
.vm-meta .editor .form-actions .form-action {
5072
    min-width: 50px;
5073
}
5074

    
5075
.vm-meta .editor .form-field input.meta-key {
5076
    width: 90px;
5077
}
5078

    
5079
.vm-meta .form-field {
5080
    float: left;
5081
}
5082

    
5083
.vm-meta .form-actions .form-action {
5084
    float: left;
5085
    margin-right: 10px;
5086
    height: 11px;
5087
}
5088

    
5089
.vm-meta .editor .form-actions .cancel {
5090
    margin-right: 0;
5091
}
5092

    
5093
.vm-meta .editor .form-actions {
5094
    float: right;
5095
    margin:0;
5096
    padding:0;
5097
    margin-left: 15px;
5098
    margin-top: 0px;
5099
}
5100

    
5101
.vm-meta .editor {
5102
    background-color: rgba(64, 133, 165, 0.898) !important;
5103
    background-color: #649DB8;
5104
    font-size:0.9em;
5105
}
5106

    
5107
.vm-meta .meta-key-title {
5108
    font-size: 1.3em;
5109
    color: #fff;
5110
    margin-bottom: 10px;
5111
    display: none;
5112
    float: left;
5113
}
5114

    
5115
.vm-meta .editor-content {
5116
    padding: 10px;
5117
}
5118

    
5119
.vm-meta .inner-mask {
5120
    background-color: #fff;
5121
    opacity:0.6;
5122
    position: absolute;
5123
    top:0;
5124
    left:0;
5125
}
5126

    
5127
.vm-meta .editor label {
5128
    float: left;
5129
    color: #fff;
5130
    margin-right: 2px;
5131
    padding-top:4px;
5132
    font-size: 0.9em;
5133
}
5134

    
5135
.vm-meta .editor input {
5136
    border: none;
5137
    width: 170px;
5138
    margin-left: 10px;
5139
    font-size: 0.9em;
5140
    padding: 4px;
5141
}
5142

    
5143
.vm-meta li.create .options-object-cont {
5144
    background-color: #B3C9AD ;
5145
    border-color: #788774;
5146
}
5147
.vm-meta li.create .options-object-cont .value,
5148
.vm-meta li.create .options-object-cont .title {
5149
    color: #fff;
5150
}
5151

    
5152
#createvm-overlay-content {
5153
    padding: 0;
5154
}
5155

    
5156
.overlay-createvm .container {
5157
    width: 624px !important;
5158
}
5159

    
5160
.create-vm .header-step.current {
5161
    font-weight: bold;
5162
}
5163

    
5164
.create-vm .create-step-cont {
5165
    min-height: 240px;
5166
}
5167
.create-vm .create-controls {
5168
    padding: 10px;
5169
}
5170

    
5171
.create-vm ul li {
5172
    cursor: pointer;
5173
    padding: 4px;
5174
}
5175

    
5176
.create-vm ul li.selected {
5177
    background-color: #aaa;
5178
}
5179

    
5180
.cont-toggler {
5181
    background-image: url("../images/down-arrow.png");
5182
    background-position: right;
5183
    background-repeat: no-repeat;
5184
    background-color: #A1C8DB;
5185
    display: inline-block;
5186
    border-right: 6px solid #A1C8DB;
5187
    padding:2px;
5188
    padding-right: 14px;
5189
    padding-left:0;
5190
    cursor: pointer;
5191
    color: #fff;
5192
    font-size: 0.9em;
5193
}
5194

    
5195
.cont-toggler .label {
5196
    background-color: #98BDCF;
5197
    padding: 2px;
5198
    padding-left: 5px;
5199
    padding-right: 5px;
5200
}
5201

    
5202
.cont-toggler.open {
5203
    background-color: #98BDCF;
5204
    border-color: #98BDCF;
5205
    background-image: url("../images/up-arrow.png");
5206
}
5207

    
5208
.cont-toggler.open .label {
5209
    background-color: #4085A5;
5210
}
5211

    
5212
.overlay .form label {
5213
    font-color: #444;
5214
    margin-right: 10px;
5215
}
5216

    
5217
.form-field.error label {
5218
    color: #ff0000;
5219
    text-decoration: underline;
5220
}
5221

    
5222
.form-field input {
5223
    border: 1px solid #aaa;
5224
    width: 200px;
5225
    padding: 3px;
5226
}
5227

    
5228
.form-actions {
5229
    margin-top: 5px;
5230
    padding-top:5px;
5231
    border-top: 1px solid #64a6c4;
5232
    font-size: 0.8em;
5233
}
5234

    
5235
.form-actions.plain {
5236
    margin-top: 0px;
5237
    padding-top:0px;
5238
    border-top: 0px;
5239
}
5240

    
5241
.form-action {
5242
    float: right;
5243
    min-width: 140px;
5244
    background-color: #FF7F2A;
5245
    border: 1px solid #FF7F2A;
5246
    text-align: center;
5247
    color: #FFFFFF;
5248
    cursor: pointer;
5249
    padding: 4px;
5250
}
5251

    
5252
.form-action:hover {
5253
    background-color: #FF9955;
5254
    color: #FFF;
5255
}
5256

    
5257
.form-action.prev,
5258
.form-action.cancel {
5259
    background-color: #800;
5260
    border: 1px solid #800;
5261
    float: left;
5262
}
5263

    
5264
.form-action.prev:hover,
5265
.form-action.cancel:hover {
5266
    background-color: #CC0000;
5267
    color: #fff;
5268
}
5269

    
5270
.form-action.next,
5271
.form-action.ok {
5272
    background-color: #080;
5273
    border: 1px solid #080;
5274
}
5275

    
5276
.form-action.next:hover,
5277
.form-action.ok:hover {
5278
    background-color: #00aa00;
5279
    color: #fff;
5280
}
5281

    
5282
.form-action .create,
5283
.form-action .submit {
5284

    
5285
}
5286

    
5287
.form-action.in-progress, button.in-progress {
5288
    background-image: url("../images/icons/indicators/medium/horizontal-progress.gif");
5289
    background-repeat: no-repeat;
5290
    background-position: center center;
5291
    color: transparent;
5292
}
5293

    
5294
#createvm-overlay-content {
5295
    padding: 0;
5296
}
5297

    
5298
.create-vm .image-details.selected .size {
5299

    
5300
}
5301

    
5302
.create-vm .image-details .show-details:hover {
5303
    color: #aaa !important; 
5304
}
5305
.create-vm .image-details.selected .show-details:hover {
5306
    color: #fff !important; 
5307
}
5308

    
5309
.create-vm .image-details.selected .show-details,
5310
.create-vm .image-details.selected .size {
5311
    color: #eee;
5312
}
5313

    
5314
.create-vm .image-details.selected span.owner {
5315
    color: #fff;
5316
}
5317

    
5318

    
5319
.create-vm .image-details p {
5320
    font-size: 0.8em;
5321
    padding-left: 27px;
5322
    display:block;
5323
}
5324

    
5325
.create-vm .image-details span.owner {
5326
    display: block;
5327
    font-size: 0.9em;
5328
    float: right;
5329
    color: #FF7F2A;
5330
    position: absolute;
5331
    top: 5px;
5332
    right: 5px;
5333
}
5334

    
5335
.create-vm .select-image .show-details {
5336
    display: none;
5337
    font-size: 0.8em;
5338
    text-decoration: underline;
5339
    color: #000;
5340
    position: absolute;
5341
    bottom: 5px;
5342
    right: 5px;
5343
}
5344

    
5345
.create-vm .image-details .size {
5346
    margin-top: 2px;
5347
    font-size: 0.8em;
5348
    color: #aaa;
5349
    margin-left: 10px;
5350
}
5351

    
5352
.create-vm .step-cont {
5353
    margin: 15px;
5354
}
5355

    
5356
.create-vm .create-step-cont {
5357
    min-height: 250px;
5358
    float: left;
5359
    width: 624px;
5360
}
5361

    
5362
.create-vm .create-controls {
5363
    padding: 10px;
5364
    border-top: 1px solid #ddd;
5365
}
5366

    
5367
.create-vm .empty {
5368
    font-size: 0.8em;
5369
    color: #444;
5370
}
5371

    
5372
.create-vm h4 {
5373
    color: #5CA1C0;
5374
    margin-bottom: 0.5em;
5375
    font-family: arial;
5376
}
5377
.create-vm ul li {
5378
    cursor: pointer;
5379
    padding: 4px;
5380
    font-size: 0.9em;
5381
}
5382

    
5383
.create-vm .create-step-cont li.ssh-key-option.selected,
5384
.create-vm ul li.selected {
5385
    background-color: #FF7F2A;
5386
    background-image:linear-gradient(top, #FF9955, #E88B4D);
5387
    background-image:-webkit-linear-gradient(top, #FF9955, #E88B4D);
5388
    background-image:-o-linear-gradient(top, #FF9955, #E88B4D);
5389
    background-image:-moz-linear-gradient(top, #FF9955, #E88B4D);
5390
    color: #fff;
5391
}
5392

    
5393
.create-vm .images-list-cont.loading .loading-indicator {
5394
    display: block !important;
5395
}
5396

    
5397
.create-vm .images-list-cont .loading-indicator {
5398
    display: none;
5399
    position: absolute;
5400
    right: -13px;
5401
    top: 2px;
5402
    width: 30px;
5403
    height: 10px;
5404
    background-repeat: no-repeat;
5405
    background-image: url("../images/icons/indicators/medium/progress.gif");
5406
}
5407

    
5408
.create-vm .images-list-cont h4 {
5409
    position: relative;
5410
}
5411

    
5412
.create-vm .images-list-cont {
5413
    width: 40%;
5414
    float: left;
5415
    padding-left: 3%;
5416
    padding-right: 3%;
5417
}
5418

    
5419
.create-vm li p.desc {
5420
    font-size: 0.9em;
5421
}
5422

    
5423
.create-vm p.desc.warning {
5424
    color: #880000;
5425
}
5426

    
5427
.create-vm p.desc.empty {
5428
    color: #000;
5429
}
5430

    
5431
.create-vm p.desc {
5432
    font-size: 0.8em;
5433
    color: #888;
5434
    margin-bottom: 10px;
5435
}
5436

    
5437
.create-vm li.role .values .val:hover {
5438
    background-color: #eee;
5439
}
5440
.create-vm li.role .values .val.selected,  .create-vm li.role .values .val.selected:hover {
5441
    color: #fff;
5442
    background-color: #FF9955;
5443
}
5444

    
5445
.create-vm .images-filter-cont, .create-vm .flavors-predefined-cont {
5446
    width: 18%;
5447
    padding-right: 4%;
5448
    float:left;
5449
    border-right: 1px solid #A1C8DB;
5450
    overflow: auto;
5451
}
5452

    
5453
.create-vm .flavor-options-cont {
5454
    width: 74%;
5455
    float: left;
5456
    margin-left: 20px;
5457
}
5458

    
5459
.create-vm .flavor-options-cont .flavor-options li:hover {
5460
    background-image:-webkit-linear-gradient(top, #E8F4FA, #D1E7F0);
5461
    background-image:-o-linear-gradient(top, #E8F4FA, #D1E7F0);
5462
    background-image:-moz-linear-gradient(top, #E8F4FA, #D1E7F0);
5463
    background-image:linear-gradient(top, #E8F4FA, #D1E7F0);
5464
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E8F4FA', endColorstr='#D1E7F0', GradientType=0);
5465
}
5466

    
5467
.create-vm .flavor-options-cont .flavor-options li.disabled * {
5468
    color: #eee !important;
5469
}
5470

    
5471
.create-vm .flavor-options-cont .flavor-options li.disabled {
5472
    background-image:linear-gradient(top, #aaa, #ddd);
5473
    background-image:-webkit-linear-gradient(top, #aaa, #ddd);
5474
    background-image:-o-linear-gradient(top, #aaa, #ddd);
5475
    background-image:-moz-linear-gradient(top, #aaa, #ddd);
5476
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaaaaa', endColorstr='#dddddd', GradientType=0);
5477
}
5478

    
5479
.create-vm .flavor-options-cont .flavor-options li.selected {
5480
    background-color: #FF9955;
5481
    background-image:linear-gradient(top, #FF9955, #E88B4D);
5482
    background-image:-webkit-linear-gradient(top, #FF9955, #E88B4D);
5483
    background-image:-o-linear-gradient(top, #FF9955, #E88B4D);
5484
    background-image:-moz-linear-gradient(top, #FF9955, #E88B4D);
5485
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9955', endColorstr='#E88B4D', GradientType=0);
5486
    border: 1px solid #C97943;
5487
}
5488

    
5489
.create-vm .predefined-list li.disabled {
5490
    color: #ddd !important;
5491
}
5492

    
5493
.create-vm .flavor-options-cont .flavor-options li {
5494
    display: block;
5495
    float: left;
5496
    margin-right: 10px;
5497
    margin-bottom: 9px;
5498
    padding: 9px 14px;
5499
    border: 1px solid #aaa;
5500
    background-image:-webkit-linear-gradient(top, #D1E7F0, #E8F4FA);
5501
    background-image:-o-linear-gradient(top, #D1E7F0, #E8F4FA);
5502
    background-image:-moz-linear-gradient(top, #D1E7F0, #E8F4FA);
5503
    background-image:linear-gradient(top, #D1E7F0, #E8F4FA);
5504
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D1E7F0', endColorstr='#E8F4FA', GradientType=0);
5505
}
5506

    
5507
.create-vm .flavor-opts-list.compact li {
5508
    padding: 7px 9px;
5509
    margin-right: 7px;
5510
}
5511

    
5512
.create-vm .flavor-options-cont .flavor-options {
5513
    margin-bottom: 2px;
5514
}
5515

    
5516

    
5517
.create-vm .flavor-options .metric {
5518
    font-size: 0.8em;
5519
    margin-left: 2px;
5520
}
5521

    
5522
.create-vm .flavor-options span.available {
5523
  font-size: 0.8em;
5524
  font-weight: normal;
5525
  margin-left: 5px;
5526
}
5527

    
5528
.create-vm .flavor-options span.title {
5529
    color: #444;
5530
}
5531

    
5532
.create-vm .flavor-options span.desc {
5533
    display: block;
5534
    color: #aaa;
5535
    font-weight: normal;
5536
    font-size: 0.8em;
5537
    float: right;
5538
    margin-top: 4px;
5539
}
5540

    
5541
.disktip {
5542
    padding: 4px;
5543
    top: 20px;
5544
}
5545

    
5546
.create-vm .flavor-options .flavors-disk-template-list {
5547
    position: relative;
5548
}
5549

    
5550
.create-vm .flavor-options .disk_template.option {
5551
    z-index: 10;
5552
    min-width: 50px;
5553
    text-align: center;
5554
}
5555

    
5556
/*0 position is -470px*/
5557
.create-vm .flavor-options .disk-template-description {
5558
    font-size: 0.8em;
5559
    color: #444;
5560
    background-image: url("../images/horizontal-pointer.png");
5561
    background-repeat: repeat-x;
5562
    background-position: -470px 0;
5563
    padding-top: 15px;
5564
    margin-top: -10px;
5565
    font-style: italic;
5566
    display:block;
5567
    overflow: auto;
5568
    padding-bottom: 0px;
5569
    margin-bottom: 7px;
5570
    width: 100%;
5571
}
5572

    
5573
.create-vm .flavor-options .disk_template.option .description {
5574
    display: none;
5575
    position: absolute;
5576
    bottom: -20px;
5577
    left:0;
5578
    color: #888;
5579
    font-style: italic;
5580
    display: block;
5581
    background-color: #fff;
5582
    width: 100%;
5583
    text-align: left;
5584
    z-index: 0;
5585
    border-top: 1px solid #ddd;
5586
    padding-top: 3px;
5587
    display: none;
5588
}
5589

    
5590
.create-vm .flavor-options .selected .value {
5591
    color: #FFF;
5592
}
5593

    
5594
.create-vm .flavor-options .value {
5595
    font-weight: bold;
5596
    color: #5CA1C0;
5597
}
5598

    
5599
.create-vm .flavor-options-cont h4 {
5600
    border-bottom: 1px solid #A1C8DB;
5601
    padding-bottom: 5px;
5602
}
5603

    
5604
.create-vm .images-info-cont {
5605
    width: 28%;
5606
    padding-left: 3%;
5607
    float: left;
5608
    border-left: 1px solid #A1C8DB;
5609
}
5610

    
5611
.create-vm .select-image.wide .show-details {
5612
    display: inline;
5613
}
5614

    
5615
.create-vm .select-image .images-info-cont .hide {
5616
    display: none;
5617
}
5618

    
5619
.create-vm .select-image.wide .images-info-cont .hide {
5620
    display: block;
5621
    float: right;
5622
    position: absolute;
5623
    right: 10px;
5624
    top: 10px;
5625
    font-size: 0.8em;
5626
    text-decoration: underline;
5627
    color: #5CA1C0;
5628
    cursor: pointer;
5629
}
5630

    
5631
.create-vm .select-image.wide .images-list-cont {
5632
    width: 74%;
5633
    padding-right: 0;
5634
}
5635

    
5636
.create-vm .select-image.wide .images-info-cont .description .title {
5637
    display: none;
5638
    float: none;
5639
}
5640

    
5641
.create-vm .select-image.wide .images-info-cont .description p {
5642
    background-color: #fff;
5643
    border: 1px solid #ddd;
5644
    padding: 10px;
5645
    float: none;
5646
}
5647

    
5648
.create-vm .select-image.wide .selected .size {
5649
    color: #FFF !important;
5650
}
5651

    
5652
.create-vm .select-image.wide .image-details .size {
5653
    color: #5CA1C0;
5654
    position: absolute;
5655
    top: 5px;
5656
}
5657

    
5658
.create-vm .select-image.wide .images-info-cont h3 {
5659
    color: #5CA1C0;
5660
    margin: 10px 0;
5661
    margin-top: 5px;
5662
    text-align: left;
5663
    font-size: 0.9em;
5664
}
5665

    
5666
.create-vm .select-image.wide .images-info-cont .description p {
5667
    height: 50px;
5668
}
5669

    
5670
.create-vm .select-image.wide .images-info-cont .description {
5671
    width: 100% !important;
5672
    float: none !important;
5673
    background-color: transparent !important;
5674
    padding: 0 !important;
5675
    font-size: 1.1em;
5676
}
5677
.create-vm .select-image.wide .images-info-cont .extra-details {
5678
    height: 160px;
5679
    overflow-y: scroll;
5680
    padding-right: 15px;
5681
}
5682

    
5683
.create-vm .select-image.wide .images-info-cont .extra-details .image-detail.extra-meta .title .custom {
5684
    display: inline-block;
5685
}
5686

    
5687
.create-vm .select-image.wide .images-info-cont .extra-details .image-detail.extra-meta .title {
5688
    background-color: #999 !important;
5689
    border-color: #888 !important;
5690
}
5691
.create-vm .select-image.wide .images-info-cont .extra-details .image-detail .custom {
5692
    float: right;
5693
    display: none;
5694
    font-size: 0.8em;
5695
    margin-left: 10px;
5696
    color: #DDD;
5697
    margin-top: 2px;
5698
}
5699

    
5700
.create-vm .select-image.wide .images-info-cont .extra-details .image-detail {
5701
    padding: 0px;
5702
    background-color: transparent;
5703
    margin-bottom: 4px;
5704
}
5705

    
5706
.create-vm .select-image.wide .images-info-cont .extra-details .title {
5707
    float: left;
5708
    display: block;
5709
    width: 39%;
5710
    padding: 1%;
5711
    background-color: #5CA1C0;
5712
    color: #fff;
5713
    border: 1px solid #4F8DAA;
5714
    font-size: 0.8em;
5715
}
5716

    
5717
.create-vm .select-image.wide .images-info-cont .extra-details .value {
5718
    float: right;
5719
    display: block;
5720
    width: 55%;
5721
    padding: 1%;
5722
    border: none;
5723
    background-color: #FFF;
5724
    color: #444;
5725
    border: 1px solid #ddd;
5726
    margin-bottom: 0px;
5727
    font-size: 0.8em;
5728
}
5729

    
5730

    
5731
.create-vm .select-image.wide .images-info-cont .image-detail {
5732
}
5733

    
5734
.create-vm .select-image.wide ul.images-list {
5735
    height: 310px;
5736
    overflow-y: scroll;
5737
    padding-right: 3%;
5738
}
5739

    
5740
.flavors-predefined-cont {
5741

    
5742
}
5743

    
5744
.flavor-options-cont {
5745
}
5746

    
5747
.create-vm .select-image.wide .images-info-cont {
5748
    position: absolute;
5749
    width: 88%;
5750
    background-color: #DAE9F0;
5751
    padding: 2%;
5752
    border-left: none;
5753
    height: 320px;
5754
    box-shadow: 0px 0px 2px #aaa;
5755
    -moz-box-shadow: 0px 0px 2px #aaa;
5756
    -webkit-box-shadow: 0px 0px 2px #aaa;
5757
    display: none;
5758
}
5759

    
5760

    
5761
.create-vm .images-info-cont h4, .create-vm .create-step-cont .param h4{
5762
    color: #FF9955;
5763
    margin-bottom: 1em;
5764
    font-size: 1.2em;
5765
}
5766

    
5767
.create-vm .images-info-cont span.title {
5768
    color: #4085A5;
5769
    display: block;
5770
    margin-bottom: 2px;
5771
    font-size: 0.8em;
5772
}
5773

    
5774
.create-vm .type-filter li {
5775
    font-size: 0.8em;
5776
    /*font-weight: bold;*/
5777
    padding: 4px;
5778
    margin-bottom: 0px;
5779
    color: #FF7F2A;
5780
}
5781

    
5782
.create-vm .images-list li {
5783
    min-height: 30px;
5784
}
5785
.create-vm .images-list .image-details:hover {
5786
    background-color: #eee;
5787
}
5788

    
5789
.create-vm .images-list .image-details.selected:hover {
5790
    background-color: #FF7F2A;
5791
}
5792

    
5793
.create-vm .images-list .image-details.selected {
5794
    /*font-weight: bold;*/
5795
}
5796

    
5797
.create-vm .images-list .image-details {
5798
    padding: 6px;
5799
    margin-bottom:1px;
5800
    position: relative;
5801
}
5802

    
5803
.create-vm .images-list .image-details img {
5804
    vertical-align: middle;
5805
    margin-right: 10px;
5806
}
5807

    
5808
.create-vm .images-info-cont .image-detail:last-child p {
5809
    border-bottom: none;
5810
}
5811

    
5812
.create-vm .images-info-cont h4 img {
5813
    vertical-align: middle;
5814
    margin-right: 7px;
5815
    margin-bottom: 5px;
5816
}
5817

    
5818
.create-vm .images-info-cont .description p {
5819
    font-size: 0.8em;
5820
}
5821

    
5822
.create-vm .images-info-cont p {
5823
    margin-bottom: 7px;
5824
    font-size: 0.9em;
5825
    border-bottom: 1px solid #A1C8DB;
5826
    padding-bottom: 7px;
5827
}
5828

    
5829
.create-vm .step-header {
5830
    padding-bottom:0;
5831
    position: relative;
5832
}
5833

    
5834
.create-vm .step-header .header-step .info span.subtitle {
5835
    font-size: 1.2em;
5836
    color: #fff;
5837
    font-weight: bold;
5838
}
5839

    
5840
.create-vm .step-header .header-step .info span {
5841
    float: none;
5842
    text-align: right;
5843
}
5844

    
5845
.create-vm .step-header .header-step .info {
5846
    position: absolute;
5847
    right: 15px;
5848
    top: 20px;
5849
    font-size: 0.8em;
5850
}
5851

    
5852
.create-vm .step-header .header-step span {
5853
    float: left;
5854
    display: block;
5855
}
5856

    
5857
.create-vm .steps-container {
5858
    width: 2000em;
5859
}
5860

    
5861
.create-vm .step-header .header-step .title {
5862
    margin-top: 20px;
5863
    font-size: 1em;
5864
    margin-left: 10px;
5865
}
5866

    
5867
#createvm-overlay-content {
5868
    width: 624px;
5869
    overflow: hidden;
5870
}
5871

    
5872
.create-vm .steps-history .steps-history-cont.current .title {
5873
    display: block;
5874
    top: 23px;
5875
    left: 43px;
5876
    font-size: 1.2em;
5877
    color: #ffffff;
5878
    font-weight: bold;
5879
    font-family: 'Ubuntu', sans-serif !important;
5880
}
5881

    
5882
.create-vm .steps-history .steps-history-cont.current .subnum {
5883
    display: none;
5884
    float: none;
5885
    font-size: 0.9em;
5886
    font-family: 'Ubuntu', sans-serif  !important;
5887
}
5888

    
5889
.create-vm .steps-history .steps-history-cont.current .subtitle,
5890
.create-vm .steps-history .steps-history-cont.current .description {
5891
    font-family: 'Ubuntu', sans-serif  !important;
5892
}
5893

    
5894
.create-vm .steps-history .steps-history-cont.current .info {
5895
    display: block;
5896
    font-family: 'Ubuntu', sans-serif !important;
5897
}
5898

    
5899
.create-vm .steps-history .steps-history-cont.completed .title,
5900
.create-vm .steps-history .steps-history-cont.completed .num {
5901
    color: #A1C8DB;
5902
}
5903

    
5904
.create-vm .steps-history .steps-history-cont.completed {
5905
    background-color: #4085A5;
5906
    color: #fff;
5907
    cursor: pointer;
5908
}
5909

    
5910
.create-vm .steps-history .steps-history-cont.completed .steps-history-step {
5911
    background-image: url("../images/check.png");
5912
}
5913

    
5914
.create-vm .steps-history .steps-history-cont.current .steps-history-step {
5915
    width: 320px;
5916
}
5917

    
5918
.create-vm .steps-history .steps-history-cont.current .num {
5919
    color: #fff;
5920
}
5921

    
5922
.create-vm .steps-history .steps-history-cont.current .info {
5923
    color: #4085A5;
5924
    font-size: 0.8em;
5925
}
5926

    
5927
.create-vm .steps-history .steps-history-cont.current {
5928
    background-color: #A1C8DB;
5929
    color: #fff;
5930
    width: 468px;
5931
}
5932

    
5933
.create-vm .steps-history-step {
5934
    padding: 4px;
5935
    padding-left: 7px;
5936
    font-size: 1em;
5937
    font-family: 'Ubuntu', sans-serif  !important;
5938
    margin-right: 5px;
5939
    padding-top: 12px;
5940
    background-position: right 30px;
5941
    background-image: none;
5942
    background-repeat: no-repeat;
5943
}
5944

    
5945
.create-vm .steps-history {
5946
    background-color: #4085A5;
5947
}
5948

    
5949
.create-vm .steps-history .steps-history-cont.last {
5950
    border-right: none;
5951
}
5952

    
5953
.create-vm .steps-history .steps-history-cont .num {
5954
    margin-left: 5px;
5955
    margin-top: -10px;
5956
    padding-bottom: 10px;
5957
}
5958

    
5959
.create-vm .steps-history .steps-history-cont .title {
5960
    display: none;
5961
    position: absolute;
5962
    bottom: 0px;
5963
    text-align: center;
5964
    padding-bottom: 2px;
5965
    left:0;
5966
    width: 55px;
5967
    margin-left:0;
5968
    margin-top:0;
5969
    font-size: 0.8em;
5970
}
5971

    
5972
.create-vm .steps-history .steps-history-cont .subnum,
5973
.create-vm .steps-history .steps-history-cont .info {
5974
    display: none;
5975
}
5976

    
5977
.create-vm .steps-history .steps-history-cont {
5978
    height: 70px;
5979
    width: 51px;
5980
    float: left;
5981
    color: #fff;
5982
    border-right: 1px solid #A1C8DB;
5983
    color: #A1C8DB;
5984
    background-color: #4085A5;
5985
    background-position: center right;
5986
    background-image: none;
5987
    background-repeat: no-repeat;
5988

    
5989
    -webkit-transition: background-color .15s ease-in;
5990
    -o-transition: background-color .15s ease-in;
5991
    -moz-transition: background-color .15s ease-in;
5992
    transition: background-color .15s ease-in;
5993

    
5994
    border-bottom: 1px solid #aaa;
5995
}
5996

    
5997
.create-vm .step-header .header-step .num {
5998
    color: #225871;
5999
    font-size: 4em;
6000
    margin-bottom: -5px;
6001
    font-family: 'Ubuntu', sans-serif;
6002
    font-weight: normal !important;
6003
}
6004

    
6005
.create-vm .step-header .header-step {
6006
    color: #;
6007
    margin-bottom: -6px;
6008
    width: 25%;
6009
    padding-left: 0%;
6010
    display: block;
6011
    float: left;
6012
}
6013

    
6014
.create-vm .step-header .header-step.current {
6015
    color: #387693;
6016
}
6017

    
6018
.create-vm .image-filters-title {
6019
    margin-top: 1em;
6020
    margin-bottom: 0.5em;
6021
}
6022

    
6023
.create-vm .create-step-cont span.clear {
6024
    font-size: 0.8em;
6025
    font-weight: bold;
6026
    color: #A1C8DB;
6027
    display: block;
6028
}
6029

    
6030
.create-vm .category-filters li {
6031
    float:left;
6032
    display: block;
6033
    padding: 4px;
6034
    background-color: #eee;
6035
    margin-right: 5px;
6036
    font-size: 0.9em;
6037
    margin-bottom: 5px;
6038
}
6039

    
6040
.create-vm .content-cont {
6041
    height: 340px;
6042
    overflow: auto;
6043
}
6044

    
6045
.create-vm .vm-confirm .confirm-params span.cval {
6046
    margin-left: 8px;
6047
    color: #444;
6048
}
6049

    
6050
.create-vm .vm-confirm .confirm-params span.ckey {
6051
    color: #4085A5;
6052
    font-weight: bold;
6053
}
6054

    
6055
.create-vm .vm-confirm .confirm-params {
6056
    margin-bottom: 15px;
6057
}
6058

    
6059
.create-vm .vm-confirm h3.vm-name {
6060
    background-repeat: no-repeat;
6061
    background-position: left center;
6062
    font-size: 1.4em;
6063
    padding-left: 1.45em;
6064
    color: #4085A5;
6065
}
6066

    
6067
.create-vm .images-list-cont h4 a {
6068
    margin-top: 3px;
6069
    margin-right: -2px !important;
6070
}
6071
.create-vm .images-list-cont h4 a,
6072
.create-vm .list-cont h4 a {
6073
    font-size: 0.8em;
6074
    font-weight: normal;
6075
    margin-right: 5px;
6076
    float: right;
6077
    color: #FF7F2A;
6078
}
6079

    
6080
.create-vm .confirm-params {
6081
    overflow: auto;
6082
}
6083

    
6084
.create-vm .vm-confirm .ssh.confirm-params {
6085
    max-height: 150px;
6086
}
6087

    
6088
.create-vm .personalize-cont .confirm-params {
6089
    max-height: 160px;
6090
    margin-right: 10px;
6091
}
6092

    
6093
.create-vm .personalize-cont,
6094
.create-vm .confirm-cont {
6095
    height: 250px;
6096
}
6097

    
6098
.create-vm .image-warning p {
6099
  width: 80%;
6100
  float: left;
6101
}
6102

    
6103
.create-vm .image-warning .untrusted-image-confirm:hover {
6104
  background-color: #7D674E;
6105
}
6106

    
6107
.create-vm .image-warning .untrusted-image-confirm {
6108
  display: inline-block;
6109
  padding: 5px;
6110
  background-color: #5C4D39;
6111
  color: #FFF;
6112
  width: 10%;
6113
  float: right;
6114
  margin-top: 4px;
6115
  margin-right: 2px;
6116
  cursor: pointer;
6117
  text-align: center;
6118
}
6119

    
6120
.create-vm .image-warning {
6121
  display: none;
6122
  background-color: #987249;
6123
  color: #fff;
6124
  padding: 10px 15px;
6125
  font-size: 0.9em;
6126
  border-top: 1px solid #AAA;
6127
}
6128

    
6129
.create-vm .create-step-cont .rename input.rename-field {
6130
    font-size: 1.4em;
6131
    padding: 5px;
6132
    width: 93%;
6133
    padding-left: 30px;
6134
    background-position: 7px center;
6135
    background-repeat: no-repeat;
6136
}
6137

    
6138
.create-vm .create-step-cont .rename label {
6139
    display: block;
6140
}
6141

    
6142
.create-vm .create-step-cont .personalize-conts,
6143
.create-vm .create-step-cont .confirm-conts {
6144
    margin-top: 20px;
6145
}
6146

    
6147
.create-vm .create-step-cont .personalize-cont,
6148
.create-vm .create-step-cont .confirm-cont {
6149
    width: 30%;
6150
    margin-right: 2%;
6151
    border-right: 1px solid #A1C8DB;
6152
    float: left;
6153
}
6154

    
6155
.create-vm .create-step-cont .confirm-cont ul li .title {
6156
    width: 55px;
6157
    float: left;
6158
}
6159

    
6160
.create-vm .create-step-cont .list-cont ul li .value {
6161
    float: right;
6162
    padding-top: 2px;
6163
    display: block;
6164
    width: 90px;
6165
    text-align: right;
6166
}
6167

    
6168
.create-vm .create-step-cont .list-cont ul li.flavor-disktype .value {
6169
    width: 45px;
6170
}
6171

    
6172
.create-vm .create-step-cont .list-cont ul li.image-description .value,
6173
.create-vm .create-step-cont .list-cont ul li.image-name .value {
6174
    float: none;
6175
    width: auto;
6176
    text-align:left;
6177
    width: auto;
6178
}
6179

    
6180
.create-vm .create-step-cont .list-cont ul li {
6181
    padding:0;
6182
    margin:0;
6183
    margin-bottom: 5px;
6184
    border-bottom: 1px solid #EEE;
6185
    padding-bottom: 7px;
6186
    margin-right: 10px;
6187
}
6188

    
6189
.create-vm .create-step-cont li.ssh-key-option .check {
6190
    float: right;
6191
    margin-right: 5px;
6192
    margin-top: 0px;
6193
}
6194

    
6195
.create-vm .create-step-cont li.ssh-key-option.selected {
6196
}
6197
.create-vm .create-step-cont li.ssh-key-option.selected:hover {
6198
    background-color: #F95;
6199
}
6200

    
6201
.create-vm .create-step-cont li.ssh-key-option:hover {
6202
    background-color: #eee;
6203
}
6204

    
6205
.create-vm .create-step-cont li.ssh-key-option.selected {
6206
}
6207

    
6208
.create-vm .create-step-cont li.ssh-key-option {
6209
    padding: 6px !important;
6210
}
6211

    
6212
.create-vm .create-step-cont .list-cont.ssh {
6213
    width: 60%;
6214
}
6215

    
6216
.create-vm .create-step-cont .list-cont.meta h4 {
6217
    margin-right: 0;
6218
}
6219

    
6220
.create-vm .create-step-cont .list-cont.meta {
6221
    margin-right:0;
6222
    border-right: none;
6223
    width: 195px;
6224
}
6225

    
6226
.create-vm .list-cont > h4 {
6227
    font-size: 1.2em;
6228
    margin-right: 10px;
6229
    border-bottom: 1px solid #A1C8DB;
6230
    padding-bottom: 5px;
6231
    color: #387693;
6232
}
6233

    
6234
.create-vm .list-cont .param.image-name {
6235
    margin-bottom: 0 !important;
6236
    border-bottom: none !important;
6237
}
6238

    
6239
.create-vm .list-cont .param h4 {
6240
    margin-bottom: 0px !important;
6241
    font-size: 1.1em !important; 
6242
}
6243

    
6244
.create-vm .list-cont .param {
6245
    margin-bottom: 7px !important;
6246
}
6247

    
6248
.create-vm .list-cont .value {
6249
    font-weight: bold;
6250
}
6251

    
6252
.create-vm .list-cont .param .value {
6253
    font-size: 0.9em;
6254
}
6255

    
6256
.create-vm .list-cont .param .title {
6257
    color: #387693;
6258
}
6259

    
6260
.create-vm .list-cont .image-description {
6261
    margin-left:0;
6262
}
6263

    
6264
.create-vm .list-cont .image-description .value {
6265
    font-weight: normal;
6266
    margin-left: 0 !important;
6267
}
6268

    
6269
.create-vm .list-cont .image-description .title {
6270
    display: none;
6271
    font-size: 0.8em;
6272
}
6273

    
6274
.create-vm .list-cont.meta .values span {
6275
    display:block;
6276
    float: left;
6277
    margin-right: 4px;
6278
    border: 1px solid #eee;
6279
    padding:3px;
6280
    margin-bottom: 4px;
6281
    font-size: 0.9em;
6282
}
6283

    
6284
.create-vm .list-cont.meta .key {
6285
    font-weight: bold;
6286
    font-size: 0.9em;
6287
    display: block;
6288
    margin-bottom: 5px;
6289
}
6290

    
6291
.create-vm .meta input {
6292
    font-size: 0.8em;
6293
}
6294

    
6295
.vm-connect .connect-cont {
6296
    margin-bottom: 20px;
6297
    border-bottom: 1px solid #A1C8DB;
6298
    padding-bottom: 20px;
6299
}
6300

    
6301
.vm-connect .connection-info {
6302
    padding-bottom: 0px;
6303
    margin-bottom: 0;
6304
    border-bottom: none;
6305
}
6306

    
6307
.vm-connect .connection-info .connect a {
6308
    color: #fff;
6309
}
6310

    
6311
.vm-connect .connection-info .connect {
6312
    background-color: #387693;
6313
    color: #fff;
6314
    padding: 10px;
6315
    font-size: 1.2em;
6316
    text-align: center;
6317
}
6318

    
6319
.clip-copy {
6320
    display: block;
6321
    width: 20px;
6322
    height: 20px;
6323
    position: absolute;
6324
    border: 1px solid #387693;
6325
    background-image: url("../images/clipboard.png");
6326
    background-repeat: no-repeat;
6327
    background-position: center;
6328
    cursor: pointer;
6329
    background-color: #A1C8DB;
6330
}
6331

    
6332
.password-cont .clip-copy { right: 10px; top: 8px;}
6333

    
6334

    
6335
.overlay-invitations {
6336
    width: 680px;
6337
}
6338
.invitations-form .sending .sending-msg {
6339
    font-size: 0.8em;
6340
    display: block !important;
6341
    margin-bottom: 5px;
6342
    color: #008800;
6343
}
6344

    
6345
.invitations-form .send-error {
6346
    font-size: 0.8em;
6347
    margin-bottom: 5px;
6348
    margin-top: 5px;
6349
    color: #800;
6350
    padding: 3px;
6351
    padding-left: 0;
6352
    display: none;
6353
}
6354

    
6355
.invitations-form .error label {
6356
    color: #000 !important;
6357
}
6358

    
6359
.invitations-form .form-field {
6360
    width: 49%;
6361
    float: left;
6362
}
6363

    
6364
.invitations-view .left.none {
6365
    background-color: #880000;
6366
}
6367

    
6368
.invitations-form {
6369
    position: relative;
6370
}
6371

    
6372
.invitations-form h3 {
6373
    float: left;
6374
}
6375

    
6376
.invitations-form .add-new-invitation {
6377
    float:left;
6378
    top:2px;
6379
    right: 20px;
6380
    width: 16px;
6381
    height: 16px;
6382
    background-image: url("../images/option-action-add.png");
6383
    background-repeat: no-repeat;
6384
    background-position: center;
6385
    text-indent: -50000em;
6386
    background-color: #4085A5;
6387
    margin-left: 15px;
6388
    cursor: pointer;
6389
}
6390

    
6391
.invitations-view .left {
6392
    font-size: 1em;
6393
    color: #fff;
6394
    font-weight: bold;
6395
    background-color: #4085A5;
6396
    padding: 4px;
6397
}
6398

    
6399
input.has-errors {
6400
    border-color: #ff0000;
6401
}
6402

    
6403
.none-left .invitations-wrapper .invitations-list {
6404
    width: 100% !important;
6405
    border-left: none !important;
6406
    padding-left: 0;
6407
}
6408

    
6409
.invitations-wrapper .invitations-list {
6410
    width: 40%;
6411
    float: left;
6412
    padding-left: 10px;
6413
    border-left: 1px solid #4085A5;
6414
    margin-left: -1px
6415
}
6416

    
6417
.invitations-wrapper .invitations-form {
6418
    width: 57%;
6419
    float: left;
6420
    border-right: 1px solid #4085A5;
6421
}
6422

    
6423
.invitations-wrapper label span {
6424
    color: #aaa;
6425
    font-size: 0.8em;
6426
}
6427

    
6428
.invitations-wrapper label {
6429
    display: block;
6430
    font-size: 0.9em;
6431
    margin-bottom:10px;
6432
    font-weight: bold;
6433
}
6434

    
6435
.invitations-view .add-new-invitation {
6436
    cursor: pointer;
6437
}
6438

    
6439
.invitations-wrapper input.name {
6440
    width: 150px;
6441
}
6442

    
6443
.invitations-wrapper input {
6444
    font-size: 0.9em;
6445
    width: 155px;
6446
    padding:4px;
6447
}
6448

    
6449
.invitations-list .invitation-sent {
6450
    border-bottom: 1px solid #A1C8DB;
6451
    padding-bottom: 5px;
6452
    margin-bottom: 5px;
6453
    position: relative;
6454
}
6455

    
6456
.invitations-view h3 {
6457
    margin-bottom: 10px;
6458
    color: #4085A5;
6459
}
6460

    
6461
.invitations-list .invitation-sent.last,
6462
.invitations-list .invitation-sent:last-child {
6463
    border-bottom: none;
6464
}
6465

    
6466

    
6467
.invitations-list .invitation-sent .email {
6468
    color: #D98147;
6469
    font-size: 0.8em;
6470
    font-weight: bold;
6471
    margin-top: 2px;
6472
}
6473

    
6474
.invitations-list .pagination a,
6475
.invitations-list .pagination span {
6476
    padding: 0.2em 0.3em;
6477
}
6478

    
6479
.invitations-list .pagination {
6480
    font-size: 0.75em;
6481
}
6482

    
6483
.invitations-list .name {
6484
    color: #444;
6485
    font-size: 0.9em;
6486
}
6487

    
6488
.invitations-list .status.sending {
6489
    background-image: url("../images/icons/indicators/small/progress.gif");
6490
}
6491

    
6492
.invitations-list .status.sent {
6493
    background-image: url("../images/invitation_accepted.png");
6494
}
6495

    
6496
.invitations-list .status.resend {
6497
    background-image: url("../images/resend.png");
6498
}
6499

    
6500
.invitations-list .status.resend {
6501
    cursor: pointer;
6502
}
6503

    
6504
.invitations-list .status {
6505
    width: 20px;
6506
    height: 15px;
6507
    position: absolute;
6508
    top:5px;
6509
    right: 2px;
6510
    background-repeat: no-repeat;
6511
    background-position: center;
6512
}
6513

    
6514
.invitations-form .form-entry:last-child {
6515
    border-bottom: none;
6516
}
6517

    
6518
.invitations-form .form-entry {
6519
    position: relative;
6520
    margin-bottom: 10px;
6521
    padding-bottom: 10px;
6522
    border-bottom: 1px solid #ddd;
6523
    margin-right: 10px;
6524
}
6525

    
6526
.invitations-form .send-invitations {
6527
    float: left;
6528
    padding: 5px;
6529
    color: #fff;
6530
    margin-right: 10px;
6531
    margin-top: 10px;
6532
}
6533

    
6534
.invitations-form .form-entry.error {
6535
    padding-bottom: 0px;
6536
}
6537

    
6538
.invitations-form .form-entry.error .remove-invitation {
6539
    bottom: 32px;
6540
}
6541

    
6542
.invitations-form .remove-invitation {
6543
    padding: 5px;
6544
    background-image: url("../images/option-action-remove.png");
6545
    background-position: center;
6546
    background-repeat: no-repeat;
6547
    color: #fff;
6548
    width: 15px;
6549
    height: 15px;
6550
    cursor: pointer;
6551
    text-indent: -50000px;
6552
    position: absolute;
6553
    right: -10px;
6554
    bottom: 14px;
6555
}
6556

    
6557
.invitations-list .resent-info,
6558
.invitations-form .top-info {
6559
    font-size: 0.8em;
6560
    margin-bottom: 10px;
6561
}
6562

    
6563
.invitations-list .msg .email,
6564
.invitations-form .success .msg .email {
6565
    font-weight: bold;
6566
}
6567

    
6568
.invitations-list .msg.err-msg,
6569
.invitations-list .success.msg,
6570
.invitations-form .success .msg {
6571
    background-color: #080;
6572
    color: white;
6573
    padding: 5px;
6574
    margin-right: 10px;
6575
    margin-bottom: 5px;
6576
}
6577
.invitations-list .msg.err-msg,
6578
.invitations-list .success.msg {
6579
    margin-right: 0px;
6580
}
6581
.invitations-list .msg.err-msg {
6582
    background-color: #800;
6583
}
6584

    
6585
.overlay .models-view .previous-view-link {
6586
    margin: -10px;
6587
    margin-bottom:10px;
6588
    padding: 10px 5px;
6589
    background-image: url("../images/left-arrow.png");
6590
    background-repeat: no-repeat;
6591
    background-position: 10px center;
6592
    padding-left: 20px;
6593
    background-color: #93D070;
6594
    cursor: pointer;
6595
    border-bottom: 1px solid #eee;
6596
    text-decoration: underline;
6597
}
6598
.models-view .quick-add {
6599
    text-decoration: underline; 
6600
    color: #4085A5;
6601
    cursor: pointer;
6602
}
6603

    
6604
.empty .items-list {
6605
    margin-top: 0 !important;
6606
}
6607

    
6608
.models-view .items-empty-msg {
6609
    border-top: 1px solid #aaa;
6610
    padding-top: 10px;
6611
    font-size: 1em;
6612
    margin-top:0 !important;
6613
}
6614

    
6615
.models-view .items-empty-msg,
6616
.models-view .model-description {
6617
    color: #444;
6618
    margin: 10px 0;
6619
}
6620

    
6621
.models-view .model-list .collection-action.disabled {
6622
    background-color: #aaa;
6623
    border-color: #aaa;
6624
    cursor: default;
6625
}
6626
.models-view .model-list .collection-action.disabled:hover {
6627
    background-color: #aaa;
6628
    border-color: #aaa;
6629
}
6630

    
6631
.models-view .model-list .collection-action:hover {
6632
    background-color: #aaa;
6633
}
6634

    
6635
.models-view .model-list .collection-action:hover {
6636
    background-color: #F95;
6637
    border-color: #F95;
6638
}
6639

    
6640
.models-view .model-list .collection-action.in-progress {
6641
    background-color: #aaa;
6642
    color: #fff;
6643
    border-color: #aaa;
6644
    background-image: url("../images/icons/indicators/small/progress.gif") !important;
6645
}
6646

    
6647
.models-view .model-list .collection-action.add-generate {
6648
    background-image: url("../images/option-action-generate-ssh.png");
6649
}
6650

    
6651
.models-view .model-list .collection-action.add {
6652
    background-image: url("../images/option-action-add.png");
6653
    padding-right: 20px !important;
6654
}
6655

    
6656
.models-view .model-list .collection-action {
6657
    float: right;
6658
    background-color: #FF7F2A;
6659
    color: #fff;
6660
    padding: 6px 8px;
6661
    margin-left: 10px;
6662
    cursor: pointer;
6663
    padding-right: 30px;
6664
    background-position: right center;
6665
    background-repeat: no-repeat;
6666
    background-clip: border-box;
6667
    border-right: 5px solid #FF7F2A;
6668
}
6669

    
6670
.models-view .items-list {
6671
    margin-top: 10px;
6672
}
6673

    
6674
.models-view .model-list ul li.model-item:last-child {
6675
    margin-bottom: 0;
6676
}
6677

    
6678
.models-view .model-list ul li.model-item {
6679
    background-color: #D4E2E8;
6680
    margin-bottom: 5px;
6681
    position: relative;
6682
}
6683

    
6684
.models-view .model-list ul li.model-item .param {
6685
    float: left;
6686
    padding: 6px;
6687
}
6688

    
6689
.models-view .model-list ul li.model-item .item-action.confirm-remove {
6690
    margin-right: -15px !important;
6691
}
6692

    
6693
.models-view .model-list ul li.model-item .item-action.confirm-remove:hover .cancel {
6694
    color: inherit !important;
6695
}
6696

    
6697
.models-view .model-list ul li.model-item .item-action.confirm-remove:hover {
6698
    background-color: #F95;
6699
    color: inherit !important;
6700
}
6701

    
6702
.models-view .model-list ul li.model-item .item-action.confirm-remove span.cancel {
6703
    padding: 6px !important;
6704
}
6705

    
6706
.models-view .model-list ul li.model-item .item-action.confirm-remove span {
6707
    display: block;
6708
    float: left;
6709
    padding: 6px 15px;
6710
}
6711

    
6712
.models-view .model-list ul li.model-item .item-action .cancel-remove:hover {
6713
    color: #fff !important;
6714
}
6715

    
6716
.models-view .model-list ul li.model-item .item-action.confirm-remove,
6717
.models-view .model-list ul li.model-item .item-action .do-confirm,
6718
.models-view .model-list ul li.model-item .item-action .cancel-remove {
6719
    display:none !important;
6720
    background-color: #D95D0A;
6721
    padding:0;
6722
    margin:0;
6723
}
6724

    
6725
.models-view .model-list ul li.model-item.pending-delete .item-action.remove {
6726
    display: none;
6727
}
6728

    
6729
.models-view .model-list ul li.model-item.pending-delete .item-action .cancel {
6730
    background-color: #F95;
6731
}
6732

    
6733
.models-view .model-list ul li.model-item.pending-delete .item-action.confirm {
6734
    background-color: #FF7F2A;
6735
}
6736

    
6737
.models-view .model-list ul li.model-item.pending-delete .item-action.confirm-remove,
6738
.models-view .model-list ul li.model-item.pending-delete .item-action.confirm-remove .do-confirm,
6739
.models-view .model-list ul li.model-item.pending-delete .item-action .cancel-remove {
6740
    display:block !important;
6741
}
6742

    
6743
.models-view .model-list ul li.model-item.pending-delete .item-action {
6744
    display: block;
6745
}
6746

    
6747
.models-view .model-list ul li.model-item.expanded .item-action,
6748
.models-view .model-list ul li.model-item:hover .item-action {
6749
    display: block;
6750
}
6751

    
6752
.models-view .model-list ul li.model-item .item-action.hide {
6753
    background-image: url("../images/minus-8.png");
6754
}
6755
.models-view .model-list ul li.model-item .item-action.show:hover {
6756
    background-image: url("../images/plus-8.png");
6757
}
6758

    
6759
.models-view .model-list ul li.model-item .item-action.show {
6760
    background-image: url("../images/plus-8-dark.png");
6761
}
6762

    
6763
.models-view .model-list ul li.model-item .item-action.remove,
6764
.models-view .model-list ul li.model-item .item-action.disconnect
6765
{
6766
    background-image: url("../images/option-action-remove.png");
6767
}
6768

    
6769
.models-view .model-list ul li.model-item .item-action.edit:hover {
6770
    background-image: url("../images/option-action-edit-light.png");
6771
}
6772

    
6773
.models-view .model-list ul li.model-item .item-action.edit {
6774
    background-image: url("../images/option-action-edit.png");
6775
}
6776
.models-view .model-list ul li.model-item .item-action.remove:hover,
6777
.models-view .model-list ul li.model-item .item-action.disconnect:hover
6778
{
6779
    background-color: #880000 !important;
6780
    border-color: #800 !important;
6781
}
6782

    
6783
.models-view .model-list ul li.model-item.expanded .item-action.show,
6784
.models-view .model-list ul li.model-item.expanded .item-action.hide,
6785
.models-view .model-list ul li .item-actions .item-action:hover {
6786
    background-color: #4085A5;
6787
    color: #fff;
6788
    border-color: #4085A5;
6789
}
6790

    
6791
.models-view .model-list ul li .item-actions {
6792
    position: absolute;
6793
    right: -10px;
6794
    top: 0px;
6795
}
6796

    
6797
.models-view .model-list ul li .item-actions .item-action {
6798
    float: right;
6799
    padding: 6px;
6800
    margin-right: 10px;
6801
    display: none;
6802
    cursor: pointer;
6803
    padding-right: 20px;
6804
    background-repeat: no-repeat;
6805
    background-position: right center;
6806
    border-right: 5px solid transparent;
6807
}
6808

    
6809
.models-view .model-list ul li.model-item.in-progress .item-action {
6810
  display: none !important;
6811
}
6812
.models-view .model-list ul li.model-item.in-progress:hover .item-action {
6813
  display: none !important;
6814
}
6815

    
6816
.models-view .model-list h3 {
6817
    float: left;
6818
}
6819

    
6820
.models-view h3 {
6821
    font-size: 1.2em;
6822
    margin-bottom: 1em;
6823
    margin-top: 5px;
6824
    color: #4085A5;
6825
}
6826

    
6827
.models-view .form-actions {
6828
    font-size: 1.1em;
6829
}
6830

    
6831
.models-view .model-list ul li,
6832
.models-view .model-list ul {
6833
    list-style: none;
6834
}
6835

    
6836
.models-view .model-list ul li.header {
6837
    display: none;
6838
}
6839

    
6840
.models-view .model-form textarea {
6841
    width: 99%;
6842
    height: 100px;
6843
    border: 1px solid #aaa;
6844
}
6845

    
6846

    
6847
.models-view .model-form .form-field {
6848
    margin-bottom: 10px;
6849
}
6850

    
6851
.models-view .model-form label {
6852
    display: block;
6853
    color: #406A7D;
6854
    font-size: 1.1em;
6855
    margin: 0px 0 5px 0;
6856
}
6857

    
6858
.models-view .model-form .inline label {
6859
    float: left;
6860
    margin-right: 10px;
6861
    margin-top: 10px !important;
6862
}
6863

    
6864
.models-view .model-form input.long {
6865
    width: 400px;
6866
}
6867

    
6868
.models-view .model-form .inline input {
6869
    width: auto;
6870
    margin-top: 10px;
6871
}
6872

    
6873
.models-view .model-form .inline select {
6874
    width: auto;
6875
    margin-top: 7px;
6876
}
6877

    
6878
.models-view .model-form .inline .errors,
6879
.models-view .model-form .inline .field-desc {
6880
    clear: both;
6881
}
6882

    
6883
#user_public_keys .private-download {
6884
    margin: 5px 0;
6885
    margin-top: 6px;
6886
}
6887

    
6888
#user_public_keys .private-cont form {
6889
    float: left;
6890
    margin-left: 5px;
6891
}
6892

    
6893
#user_public_keys input.form-text:hover {
6894
    background: #F95;
6895
}
6896

    
6897
#user_public_keys input.form-text {
6898
    background: #FF7F2A;
6899
    color: #fff;
6900
    border: 1px solid #F95;
6901
    padding: 0 5px;
6902
    margin: 0 5px;
6903
    margin-top: -1px;
6904
    cursor: pointer;
6905
}
6906

    
6907
#user_public_keys .form-text {
6908
    float: left;
6909
}
6910

    
6911
#user_custom_images,
6912
#user_public_keys,
6913
#user_public_ips {
6914
    font-size: 0.7em;
6915
}
6916

    
6917
#user_public_keys .download-button {
6918
    width: 30px;
6919
    height: 30px;
6920
}
6921

    
6922

    
6923
#user_public_keys #model-item-tpl {
6924
    display: none;
6925
}
6926
#user_public_keys .model-item .name {
6927
    color: #4085A5;
6928
    font-size: 1.2em;
6929
}
6930

    
6931
#user_public_keys .model-item .fingerprint .flabel {
6932
    color: #888;
6933
    float: left;
6934
    margin-right: 5px;
6935
}
6936

    
6937
#user_public_keys .model-item .fingerprint {
6938
    float: none;
6939
    clear: both;
6940
    color: #444;
6941
    font-family: monospace;
6942
    letter-spacing: 1px;
6943
    padding: 4px;
6944
    font-size: 0.9em;
6945
    border-top: 1px solid #fff;
6946
}
6947

    
6948
#user_public_keys .model-item .publicid {
6949
    display: none;
6950
}
6951

    
6952
#user_public_keys .model-item.expanded .publicid .param-content {
6953
    padding: 5px 5px;
6954
    overflow: auto;
6955
    background-color: #FFF;
6956
    border: 1px solid #4085A5;
6957
    border-left: none;
6958
    border-right: none;
6959
    font-size: 1.1em;
6960
}
6961

    
6962
#user_public_keys .model-item.expanded .publicid .param-content textarea {
6963
    width: 100%;
6964
    height: 90px;
6965
    margin:0;
6966
    padding:0;
6967
    border:none;
6968
    overflow: auto;
6969
}
6970

    
6971
#user_public_keys .model-item.expanded .publicid {
6972
    display: block;
6973
    background-color: #fff;
6974
    width: 100%;
6975
    margin-top: 0px;
6976
    margin-left: 0px;
6977
    color: #fff;
6978
    padding:0 !important;
6979
}
6980

    
6981
.models-view .form-messages {
6982
    margin-bottom: 10px;
6983
}
6984

    
6985
.models-view .list-messages {
6986
    margin-top: 10px;
6987
}
6988

    
6989
.models-view .form-messages .error,
6990
.models-view .form-messages .success,
6991
.models-view .list-messages .error,
6992
.models-view .list-messages .success,
6993
#user_public_keys .private-cont {
6994
    background-color: #AADE87;
6995
    color: #447821;
6996
    padding: 5px;
6997
    border: 1px solid #447821;
6998
    font-size: 1.1em;
6999
    margin-top: 5px;
7000
}
7001

    
7002
.models-view .form-messages .error,
7003
.models-view .list-messages .error {
7004
    background-color: #DE8D87;
7005
    color:  #782421 !important;
7006
    border-color: #782421;
7007
}
7008

    
7009
.models-view .limit-msg {
7010
    color: #800;
7011
    position: absolute;
7012
    right: 20px;
7013
    top: 25px;
7014
}
7015

    
7016
#user_public_keys .private-cont {
7017
    margin-top: 10px;
7018
}
7019

    
7020
#user_public_keys .private-cont .private-msg {
7021
    float: left;
7022
    padding:5px;
7023
    margin-top: 5px;
7024
}
7025

    
7026
#user_public_keys .private-cont textarea {
7027
    margin: 5px;
7028
    width: 97%;
7029
    height: 200px;
7030
}
7031

    
7032
#user_public_keys .private-cont .close-private:hover {
7033
    color: #Fff;
7034
}
7035

    
7036
#user_public_keys .private-cont .close-private {
7037
    float: right;
7038
    margin-right: 5px;
7039
    font-weight: bold;
7040
    cursor: pointer;
7041
    text-decoration: underline;
7042
}
7043

    
7044
#user_public_keys .model-item .key-type {
7045
    background-color: #72ADC8;
7046
    color: #fff;
7047
    text-align: center;
7048
    font-size: 0.9em;
7049
    padding:2px 10px;
7050
    margin: 4px 6px;
7051
    margin-top: 7px;
7052
    font-weight: bold;
7053
}
7054

    
7055
#user_public_keys .private-cont .down-button {
7056
}
7057

    
7058
.models-view .form-field .field-desc {
7059
    font-style: italic;
7060
    font-size: 1em;
7061
    color: #888;
7062
}
7063

    
7064
.models-view .form-field.error label {
7065
    font-weight: bold;
7066
    color: #800 !important;
7067
}
7068

    
7069
.models-view .form-field .errors {
7070
    margin: 5px 0;
7071
}
7072

    
7073
.models-view .form-field .errors .error {
7074
    background-color: transparent;
7075
    border: none;
7076
    color: #800;
7077
}
7078

    
7079
.single .suspended-notice {
7080
  right: 180px;
7081
  top: 0px;
7082
  padding: 7px;
7083
  padding-bottom: 6px;
7084
}
7085

    
7086
.icon .suspended-notice {
7087
  right: 192px;
7088
  top: 50px;
7089
}
7090

    
7091
.suspended-notice {
7092
  display: inline-block;
7093
  padding: 4px;
7094
  background-color: #8f1915;
7095
  cursor: pointer;
7096
  position: absolute;
7097
  color: #fff;
7098
  font-size: 0.6em;
7099
  display: none;
7100
}
7101

    
7102
.suspended .suspended-notice {
7103
  display: block;
7104
}
7105

    
7106
.suspended .action-indicator {
7107
  display: none !important;
7108
}
7109

    
7110
.trigger-resize {
7111
    background-image: url("../images/pencil-disabled.png");
7112
    background-position: right 2px;
7113
    background-repeat: no-repeat;
7114
    padding-right: 15px !important;
7115
    cursor: pointer;
7116
}
7117

    
7118
.can-resize .trigger-resize:hover {
7119
    text-decoration: underline;
7120
}
7121

    
7122
.can-resize .trigger-resize {
7123
    font-weight: bold;
7124
    background-image: url("../images/pencil.png");
7125
}
7126

    
7127
.vm-resize .flavor-options-cont {
7128
  float: none;
7129
  width: 100%;
7130
  margin: 0;
7131
  height: auto;
7132
}
7133

    
7134
.form-action.disabled {
7135
  background-color: #ddd;
7136
  color: #aaa;
7137
  border-color: #999;
7138
}
7139

    
7140
.overlay.connect-ip .form-actions {
7141
  display: none;
7142
}
7143

    
7144
.overlay.connect-ip li.options-object .options-object-cont {
7145
  background-image: none !important; 
7146
}
7147

    
7148
#user_public_ips li.connected:hover .item-action.remove {
7149
  display: none;
7150
}
7151

    
7152
#user_public_ips li.connected:hover .item-action.connect {
7153
  display: none;
7154
}
7155

    
7156
#user_public_ips li.connected:hover .item-action.disconnect {
7157
  display: block;
7158
}
7159

    
7160
#user_public_ips li:hover .item-action.disconnect {
7161
  display: none;
7162
}
7163

    
7164
#user_public_ips li .progress-msg {
7165
  display: none;
7166
}
7167

    
7168
#user_public_ips li.in-progress .progress-msg {
7169
  display: block !important;  
7170
}
7171

    
7172
#user_public_ips li.in-progress {
7173
  background-color: #C6CFD2;
7174
  background-image: url("../images/icons/indicators/small/progress.gif");
7175
  background-position: 530px center;
7176
  background-repeat: no-repeat;
7177
}