Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (124.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
    background-position: 0px 35px; 
24
    overflow-y: scroll;
25
}
26

    
27
a, a:hover, a:active, a:focus, div:focus, span:focus, li:focus {
28
    outline: none;
29
}
30

    
31
pre {
32
    font-family: monospace;
33
}
34

    
35
#okeanos-image {
36
    position: absolute;
37
    bottom: -0px;
38
    right: 0;
39
    z-index:0;
40
}
41

    
42
#container {
43
    position: relative;
44
        margin:0 auto;
45
        width: 100%;
46
        background: transparent;
47
    z-index: 1;
48
}
49

    
50
#header {
51
    height: 93px;
52
    background: url("../images/header-bg.png") repeat-x scroll 0 0 transparent;
53
    margin: 0 auto;
54
    width: 700px;
55
    text-align: left;
56
    position: relative;
57
    z-index: 50;
58
}
59

    
60
#content {
61
    padding-bottom: 10px;
62
    width: 100%;
63
}
64

    
65
div#wrapper {
66
    width: 700px;
67
    margin: 0em auto;
68
    text-align: left;
69
}
70

    
71
#footer a {
72
    color: #fff;
73
}
74

    
75
#footer .software .version {
76
    font-weight: bold;
77
}
78

    
79
#footer .software {
80
    font-size: 0.6em;
81
    margin-top: 7px;
82
    color: #fff;
83
}
84

    
85
#footer {
86
    height: 80px;
87
    background-color: #4085A5;
88
    width:100%;
89
}
90

    
91
#footer-container {
92
    height: 80px;
93
    width: 100%;
94
    left:0;
95
    z-index:10;
96
}
97

    
98
#footer div.grnet-sign {
99
    margin-top:10px;
100
}
101

    
102
#footer div.grnet-sign a{
103
    color: #72ADC8;
104
}
105

    
106
#footer div.grnet-sign a:hover {
107
    color: #FFFFFF;
108
}
109

    
110
ol, ul {
111
    list-style: none;
112
}
113

    
114
blockquote, q {
115
    quotes: none;
116
}
117

    
118
blockquote:before, blockquote:after,
119
q:before, q:after {
120
    content: '';
121
    content: none;
122
}
123

    
124
/* remember to define focus styles! */
125
:focus {
126
    outline: 1px dotted #87AADE;
127
}
128

    
129
/* remember to highlight inserts somehow! */
130
ins {
131
    text-decoration: none;
132
}
133

    
134
del {
135
    text-decoration: line-through;
136
}
137

    
138
/* tables still need 'cellspacing="0"' in the markup */
139
table {
140
    border-collapse: collapse;
141
    border-spacing: 0;
142
}
143

    
144
h5 {
145
    font-weight: normal;
146
    margin-bottom:3px;
147
}
148

    
149
.tab-name, 
150
.machine-container .name,
151
h5.namecontainer span,
152
.single .machine-detail.title {
153
    font-family: 'Ubuntu', sans-serif;
154
}
155

    
156
.create-container a {
157
    font-family: 'Open Sans', sans-serif;
158
}
159

    
160
/* root element for tabs  */
161
.tab-name {
162
    background-color: #5CA1C0;
163
    color: #FFFFFF;
164
    float: right;
165
    font-size: 150%;
166
    height: 31px;
167
    text-align: right;
168
    padding-right: 15px;
169
    width: 170px;
170
}
171

    
172
.tab-separator {
173
    background-color: white;
174
    float: left;
175
    width: 2px;
176
    height: 23px;
177
    margin-top: 4px;
178
}
179

    
180
ul.css-tabs {
181
    padding: 0;
182
    height:31px;
183
    background-color: #5CA1C0;
184
}
185

    
186
ul.css-tabs .secondary {
187
    position:relative;
188
}
189

    
190
/* single tab */
191
ul.css-tabs li {
192
    float:left;
193
    padding:0;
194
    list-style-type:none;
195
}
196

    
197
ul.css-tabs .current {
198
    background: #4085A5;
199
}
200

    
201
/* link inside the tab. uses a background image */
202
ul.css-tabs a {
203
    float:left;
204
    display:block;
205
    text-decoration:none;
206
    color:#d2d2d2;
207
    position:relative;
208
    outline:0;
209
    padding: 4px 25px 0;
210
    height: 27px;
211
}
212

    
213
ul.css-tabs a:hover {
214
    background: #74AEC9;
215
}
216

    
217
/* selected tab */
218
ul.css-tabs a.current,
219
ul.css-tabs a.active {
220
    cursor:default;
221
    background: #4085A5;
222
}
223

    
224
/* tab pane */
225
div.css-panes {
226
/*    border-top: 10px solid #87aade;
227
    border-bottom: 10px solid #87aade;  */
228
    background: transparent;
229
}
230

    
231
.css-panes > div.pane {
232
    display:none;
233
}
234

    
235
.panes-menu {
236
    height: 30px;
237
    margin-bottom: 10px;
238
}
239
/* CSS3 border radius for various elements. yea - CSS isn't perfect */
240
.rounded, #sheet input, .error-rounded {
241
    border-radius: 5px;
242
    -webkit-border-radius: 5px;
243
    -moz-border-radius: 5px;
244
    -o-border-radius: 5px;
245
    -khtml-border-radius: 5px;
246
}
247

    
248
/*validation error message*/
249
/*.error {*/
250
    /*background-color:#E8FF6D;*/
251
    /*padding:4px;*/
252
    /*-webkit-box-shadow: #000 0 0 9pt;*/
253
    /*-moz-box-shadow: #000 0 0 9pt;*/
254
/*}*/
255
.error {
256
    color: #f00 !important;
257
}
258

    
259
/* nested arrow inside error message. It's 100% CSS. No images. */
260
.error em {
261
    border: 10px solid;
262
    border-color: #E8FF6D transparent transparent;
263
    bottom: -17px;
264
    display: block;
265
    height: 0;
266
    left: 10px;
267
    position: absolute;
268
    width: 0;
269
}
270

    
271
/* input field that caused validation error */
272
.invalid {
273
    background-color: rgba(221, 233, 255, 0.898) !important;
274
}
275

    
276
#beforecreate {
277
    background-color: #FF9955;
278
    height: 32px;
279
    width: 13px;
280
}
281

    
282
.pane-top {
283
    height: 70px;
284
    position: relative;
285
    background: #EFF7FA 0px 0px;
286
    /*margin-bottom: -2px;*/
287
}
288

    
289
#machines-pane-top.empty {
290
    background: transparent;
291
}
292

    
293
#beforecreate {
294
    border-left: 16px solid #efefef;
295
    margin-left: -16px;
296
}
297

    
298
.create-container {
299
    line-height: 4em;
300
}
301

    
302
#createcontainer a {
303
}
304

    
305
#create {
306
    background-color: #FF7F2A;
307
    color: #000;
308
    cursor: pointer;
309
    text-decoration: none;
310
    font-size:100%;
311
}
312

    
313
#create:hover {
314
    background-color: #FF9955;
315
}
316

    
317
#console-header {
318
    height: 67px;
319
    margin-bottom:15px;
320
    background: url("../images/header-bg.png") repeat-x scroll 0 0 #FFFFFF;
321
}
322

    
323
.header-logo {
324
    padding-top: 28px;
325
}
326

    
327
div#footer-text a {
328
    color: #FFFFFF;
329
    text-decoration: none;
330
}
331

    
332
div#footer-text{
333
    color: #FFFFFF;
334
    font-size: 75%;
335
    padding-top: 10px;
336
}
337

    
338
#footer-bg {
339
    background: url("../images/footer-bg.png") no-repeat scroll 0 0 #4085A5;
340
    background-position:right;
341
}
342

    
343
.modal {
344
    background-color:#fff;
345
    display:none;
346
    width:30em;
347
    padding:1em;
348
    text-align:left;
349
}
350

    
351
/* server wizard scrollable root element and network wizard */
352
#wizard, #networks-wizard {
353
    font-size:75%;
354
    height:425px;
355
    width:453px;
356
    overflow:hidden;
357
    position:absolute !important;
358
}
359

    
360
/* scrollable items */
361
#wizard .items {
362
    width:20000em;
363
    clear:both;
364
    position:absolute;
365
    display:block;
366
    padding: 0;
367
    margin: 0;
368
    border:none;
369
    background:none;
370
}
371

    
372
/* single item */
373
#wizard .page, #networks-wizard div.container {
374
    padding: 0px 40px 20px 15px;
375
    width:447px;
376
    float:left;
377
    display:block;
378
    border:none;
379
    background-color: transparent;
380
}
381

    
382
#networks-wizard div.container {
383
    background-color: #ECF4F8;
384
    width:400px;
385
    height: 180px;
386
    margin-bottom:50px;
387
}
388

    
389
/* title */
390
#wizard h2, #networks-wizard h2 {
391
    color: #FF7B24;
392
    font-size: 100%;
393
    font-style: italic;
394
    font-weight: bold;
395
    margin-left: 37px;
396
    margin-top: 17px;
397
}
398

    
399
#networks-wizard h2 {
400
    margin-top: 15px;
401
}
402

    
403
#wizard li {
404
    margin-bottom:1.2em;
405
}
406

    
407
#wizard .pane li {
408
    margin: 0;
409
}
410

    
411
#wizard label {
412
    font-size:120%;
413
    display:block;
414
    clear: both;
415
}
416

    
417
#wizard label strong {
418
    position:relative;
419
    top:-1px;
420
    font-size: 80%;
421
    font-weight: normal;
422
}
423

    
424
#wizard label em {
425
    font-size:75%;
426
    color:#666;
427
    font-style:normal;
428
}
429

    
430
#wizard .text {
431
    width: 270px;
432
    padding: 5px;
433
    margin-top: 10px;
434
    border: 1px solid #ccc;
435
    color: #456;
436
    letter-spacing: 1px;
437
}
438

    
439
#wizard select {
440
    border:1px solid #ccc;
441
    width:94%;
442
    padding:4px;
443
    display: none;
444
}
445

    
446
#wizard .double label {
447
    width:50%;
448
    float:left;
449
}
450

    
451
#wizard .double .text {
452
    width:93%;
453
}
454

    
455
#wizard .clearfix {
456
    clear:left;
457
    padding-top:10px;
458
}
459

    
460
#wizard .right {
461
    float:right;
462
}
463

    
464
#wizard .error {
465
    border:1px solid red;
466
}
467

    
468
#wizard a:hover div.image {
469
    background-color: #C5DEE9;
470
}
471

    
472
.selecteddiv {
473
    background-color: #C5DEE9 !important;
474
}
475

    
476
#wizard label a:hover strong {
477
    color: black;
478
}
479

    
480
#wizard div.image span.size {
481
    font-size: 75%;
482
    color: #666;
483
}
484

    
485
#wizard div.image .radio {
486
    float: left;
487
    margin-top: 10px;
488
}
489

    
490
#wizard div.image span.image-id, #wizard div.image span.description {
491
    font-size: 75%;
492
    color: #666;
493
    font-weight: normal;
494
    display:inline;
495
}
496

    
497
#wizard a:hover div.image span.image-id, #wizard a:hover div.image span.description, #wizard a:hover div.image span.size {
498
    color: black;
499
}
500

    
501
#wizard .cost {
502
    color: #79A4C1;
503
    margin-top: 40px;
504
    clear:both;
505
    margin-left: 15px;
506
    font-size: 95%;
507
}
508

    
509
#wizard #status {
510
    height: 50px;
511
    background-color: #4085A5;
512
}
513

    
514
#wizard .headernumber {
515
    font-size: 410%;
516
}
517

    
518
#wizard .headerbody {
519
    font-size: 120%;
520
    font-weight: normal;
521
    display: inline;
522
    top: -15px;
523
    position: relative;
524
}
525

    
526
#wizard .first {
527
    left: -10px;
528
}
529

    
530
#wizard .checked {
531
    color: #64a6c4 !important;
532
}
533

    
534
#wizard .li-2 {
535
    margin-top: -1px !important;
536
}
537

    
538
#wizard .img-check {
539
    margin-bottom: 8px;
540
    margin-left: -8px;
541
}
542

    
543
#wizard .li-1 .img-check {
544
    margin-left: 2px;
545
}
546

    
547
#wizard .topruler, #networks-wizard .topruler, #wizard .bottomruler, #networks-wizard .bottomruler {
548
    background-color: #CDE2EC;
549
    color: #CDE2EC;
550
    border: 0 none;
551
    height: 4px;
552
    margin-left: -1px;
553
    width: 447px;
554
    margin-bottom: 6px;
555
    margin-top: 4px;
556
}
557

    
558
#wizard .bottomruler, #networks-wizard .bottomruler {
559
    margin-top:6px;
560
}
561

    
562
#networks-wizard .topruler, #networks-wizard .bottomruler {
563
    width: 455px;
564
    float: left;
565
}
566

    
567
#wizard #cancel, #networks-wizard .cancel {
568
    background-color: #4085A5;
569
    border-color: #4085A5;
570
    text-align: center !important;
571
}
572

    
573
#wizard #cancel:hover, #networks-wizard .cancel:hover {
574
    background-color: #7DB4CD;
575
    border-color: #7DB4CD;
576
}
577

    
578
#wizard #start, #networks-wizard .create {
579
    text-align: center;
580
    background-color: #FF7F2A;
581
    border-color: #FF7F2A;
582
}
583

    
584
:focus {
585
    outline: none;
586
    -moz-outline-style: none;
587
}
588

    
589
#wizard .img-next {
590
    margin: 0 -4px -1px 8px;
591
}
592

    
593
#wizard .img-prev {
594
    margin: 0 8px -1px -4px;
595
}
596

    
597
#networks-wizard .create {
598
    float:right;
599
    width: 140px;
600
}
601

    
602
.overlay-networks-create .form-action {
603
  float: left;
604
}
605

    
606
.overlay-networks-create .fixpos {
607
  margin-top: 3px;
608
}
609

    
610
.overlay-networks-create .col-fields.bordered {
611
  border-bottom: 1px solid #CCC;
612
  margin-bottom: 10px;
613
  padding-bottom: 10px;
614
}
615

    
616
.overlay-networks-create .col-fields {
617
  margin-bottom: 10px;
618
}
619

    
620
form .fields-desc {
621
  font-size: 0.8em !important; 
622
  margin: 5px 0;
623
  padding-bottom: 0 !important;
624
}
625

    
626
.overlay-networks-create form select {
627
  padding: 1px;
628
}
629

    
630
.overlay-networks-create #network-create-subnet-custom {
631
  width: 125px;
632
}
633

    
634
.overlay-networks-create .col-fields .form-field {
635
  float: left;
636
  margin-right: 20px;
637
}
638

    
639
.overlay-networks-create .col-fields .right-field {
640
  float: right;
641
  width: 210px;
642
  margin-right: 0px;
643
}
644

    
645
.overlay-networks-create .use-dhcp {
646
  width: auto;
647
}
648

    
649
#wizard #start:hover, #networks-wizard .create:hover {
650
    background-color: #FF9651;
651
    border-color: #FF9651;
652
}
653

    
654
#wizard .separator-end {
655
    position: absolute;
656
    background-color: #387693;
657
    height: 5px;
658
    margin-left: -14px;
659
    margin-top: 382px;
660
    width: 550px;
661
}
662

    
663
.page ul {
664
    height: 270px;
665
    overflow: auto;
666
}
667

    
668
.panes ul.pane {
669
    height: 220px;
670
}
671

    
672
#wizard #tabscontainer {
673
    background-color: #CDE2EC;
674
    height: 20px;
675
    width: 448px;
676
}
677

    
678
.page ul.tabs {
679
    overflow: hidden;
680
    height: auto;
681
    margin-bottom: -1px;
682
    margin-top: -1px;
683
}
684

    
685
.page ul.tabs li {
686
    float: right;
687
    margin: 0 0.2em;
688
}
689

    
690
#status li {
691
    float: left;
692
    color: #387693;
693
    padding: 0 1px 0 37px;
694
    bottom: 0px;
695
}
696

    
697
#status li.active .headernumber {
698
    color: #FFFFFF;
699
}
700

    
701
#status li.active .headerbody {
702
    color: #FFFFFF;
703
}
704

    
705
div.image-container {
706
    border-bottom: 1px solid #CCCCCC;
707
    margin-left: 10px;
708
    margin-right: 10px;
709
}
710

    
711
#page2-container {
712
    background-color: #ECF4F8;
713
    height: 193px;
714
    margin-top: 3px;
715
    padding-top: 25px;
716
}
717

    
718
#page3-container {
719
    background-color: #ECF4F8;
720
    height: 245px;
721
    margin-bottom: 32px;
722
    padding-left: 50px;
723
}
724

    
725
/* slider root element */
726
.slider {
727
    border: 1px solid #666;
728
    cursor: pointer;
729
    display: inline !important;
730
    float: left;
731
    margin: 5px 0 20px 10px;
732
    position: relative;
733
    width: 250px;
734
}
735

    
736
.sliders {
737
    float:left;
738
    width: 40px;
739
    margin-left: 10px;
740
    margin-top: 3px;
741
}
742

    
743
.units {
744
    padding-left:10px;
745
}
746

    
747
.slider-container {
748
    padding-bottom: 15px;
749
    margin-left: 5px;
750
}
751

    
752
/* drag handle */
753
.handle {
754
    -moz-box-shadow: 0 0 2px #000000;
755
    background: url("../images/h30.png") repeat-x scroll 0 0 #FFFFFF;
756
    border: 1px solid #000000;
757
    cursor: move;
758
    display: block;
759
    height: 10px;
760
    margin-top: -8px;
761
    position: absolute;
762
    width: 8px;
763
}
764

    
765
/* progress bar (enabled with progress: true) */
766
.progress {
767
    height: 3px;
768
    background-color: #387693;
769
}
770

    
771
/* the input field */
772
.range {
773
    border: 1px solid #387693;
774
    float: left;
775
    font-size: 100%;
776
    margin: -3px 0 0 15px;
777
    padding: 2px 5px 2px 0;
778
    text-align: right;
779
    width: 50px;
780
}
781

    
782
.selectedrange {
783
    border-color: #5599FF;
784
}
785

    
786
#credits-indicator {
787
    background-color: #ECF4F8;
788
    float: none;
789
    margin: 0 0 0 10px;
790
    border: 1px solid #387693;
791
    color: #387693;
792
}
793

    
794
/* machines */
795
.machine-container {
796
    position:relative;
797
}
798

    
799
.icon .machine-container.last .machine-data-cont, .machine-container:last-child .machine-data-cont {
800
    margin-bottom:0;
801
    padding-bottom: 0;
802
    border-bottom: none;
803
}
804

    
805
.icon .machine-container.last .machine-data, .machine-container:last-child .machine-data {
806
    border-bottom: none;
807
}
808

    
809
.icon .machine-container .subtitle {
810
    font-size: 0.70em;
811
    color: #222;
812
    line-height: 23px;
813
    height: 23px;
814
    margin-top: -5px;
815
}
816

    
817
.icon .machine-container .subtitle {
818
    
819
}
820

    
821
.icon .machine-container .info {
822
    margin-top: 2px;
823
    height: 17px;
824
}
825

    
826
.icon .machine-container .building-progress {
827
    vertical-align: top;
828
}
829

    
830
.ip-version-label {
831
    font-size: 0.8em;
832
    padding: 0.3em;
833
    background-color: #C4DDE9;
834
    color: #000;
835
}
836

    
837
.icon .machine-data {
838
    width: 520px;
839
    float: left;
840
    background-color: transparent;
841
}
842

    
843
.icon .machine-info {
844
    padding: 10px 0;
845
}
846

    
847
.icon .machine-details .name {
848
    height: 24px;
849
}
850

    
851
.icon .machine-connect {
852
    width: 80px;
853
    float: left;
854
}
855

    
856
.icon .machine-details {
857
    width: 310px;
858
    float: left;
859
    margin-top: -5px;
860
}
861

    
862
.icon .state {
863
    font-size: 98%;
864
    width: 120px;
865
    margin-right: 10px;
866
    float: left;
867
    height: 55px;
868
    margin-top: -5px;
869
}
870

    
871
.vm-actions {
872
    position: relative;
873
}
874

    
875
.icon .vm-actions {
876
    /*display: none;*/
877
}
878

    
879
.icon .vm-actions, .network .vm-actions {
880
    width: 180px;
881
    height: 76px;
882
    float: left;
883
}
884

    
885
.network .vm-actions {
886
    width: 185px;
887
}
888

    
889
.icon .machine-container:hover .machine-data {
890
    background-color:#A1C8DB !important;
891
}
892

    
893
.icon .machine-container:hover .vm-actions {
894
    display: block;
895
}
896

    
897
.vm-actions {
898
    font-size: 75%;
899
}
900

    
901
.vm-actions a {
902
    color: black;
903
    height: 15px;
904
    margin: 0 0 1px 4px;
905
    padding: 1px;
906
    padding-left: 8px;
907
    display: block;
908
}
909

    
910
.vm-actions a:hover {
911
    background-color:#A1C8DB;
912
    color: #fff;
913
    border-left: 4px solid #7DB4CD;
914
    padding-left: 4px;
915
}
916

    
917
.vm-actions a.selected {
918
    color: #FF7F2A !important;
919
}
920

    
921
.vm-actions a.selected {
922
    background-color:transparent;
923
}
924

    
925
.vm-actions .action-container {
926
    position: relative;
927
}
928

    
929
.vm-actions .action-container .confirm_single {
930
    position: absolute;
931
    right: -20px;
932
    top: -2px;
933
}
934

    
935
div.list div.actions a.enabled.destroy {
936
}
937

    
938
.vm-actions .action-container.destroy {
939
    position: absolute;
940
    bottom: -1px;
941
    width: 100%;
942
    left: 0px;
943
    background: transparent;
944
}
945

    
946
.vm-actions .action-container.destroy a {
947
}
948

    
949
.icon .light-background .machine-data, div.network.light-background, div.network.expand {
950
    background-color:#aed2e3 !important;
951
}
952

    
953
.single .light-background {
954
    background-color:#aed2e3;
955
}
956

    
957
.icon .machine-data-cont {
958
    margin-bottom: 5px;
959
    padding-bottom: 5px;
960
    border-bottom: 1px solid #D1E7F0;
961
    width: 520px;
962
    float: left;
963
}
964
.icon .terminated .machine-data-cont {
965
    border-color: #B6CED6;
966
}
967

    
968
.machine a {
969
    font-weight: normal;
970
    text-decoration: none;
971
}
972

    
973
.machine span.name, .machine span.ip {
974
    font-size: 75%;
975
    color: black;
976
    margin-top: 6px;
977
}
978

    
979
.machine span.name {
980
    font-weight: bold;
981
}
982

    
983
.oldValue {
984
    display:none;
985
}
986

    
987
.state {
988
}
989

    
990
.state div {
991
    text-align: right;
992
    margin-right: 3px;
993
}
994

    
995
/* icon view actions */
996
div.machine div.actions a.shutdown-padding {
997
    margin-bottom: 22px;
998
}
999

    
1000
div.actions a.enabled:hover{
1001
    color: black !important;
1002
    text-decoration: underline;
1003
    display: block;
1004
}
1005

    
1006
div.machine:hover .actions a {
1007
    visibility: visible;
1008
}
1009

    
1010
div.machine div.display a{
1011
    visibility: visible;
1012
}
1013

    
1014
div.machine div.actions .disabled {
1015
    display: none;
1016
}
1017

    
1018
div.single-container div.vm-actions .disabled {
1019
    display: none;
1020
}
1021

    
1022
div.machine div.actions .disabled {
1023
    display: none;
1024
}
1025

    
1026
div.connect-arrow {
1027
    background: url("../images/connect-arrow.png") no-repeat;
1028
    height: 28px;
1029
    width:14px;
1030
    position: absolute;
1031
    display: none;
1032
}
1033

    
1034
.machine div.connect-arrow {
1035
    display: none;
1036
    left: -3px;
1037
    position: absolute;
1038
    top: 9px;
1039
}
1040

    
1041
div.connect-arrow:hover, div.connect-arrow.border-hover, div.connect-arrow-ie, div.connect-arrow.border-ie {
1042
    cursor: pointer;
1043
    background: url("../images/connect-arrow-hover.png") no-repeat;
1044
    height: 28px;
1045
    width:26px;
1046
}
1047

    
1048
div.connect-border {
1049
    opacity: 0.8;
1050
    filter: alpha(opacity = 80);
1051
    background-color:#4fe0c3;
1052
    height:28px;
1053
    width: 12px;
1054
    position: absolute;
1055
    display: none;
1056
}
1057

    
1058
div.connect-border:hover {
1059
    cursor: pointer;
1060
}
1061

    
1062
.machine div.connect-border {
1063
    display: none;
1064
    left: -15px;
1065
    position: absolute;
1066
    top: 9px;
1067
}
1068

    
1069
.standard .machine .logo {
1070
    float: left;
1071
    width: 50px;
1072
    height: 54px;
1073
    margin: 1px 14px 0;
1074
}
1075
.machine .logo {
1076
    background-image: url("../images/icons/machines/medium/unknown-sprite.png");
1077
    background-repeat: no-repeat;
1078
    cursor: pointer;
1079
}
1080

    
1081
.standard .machine .single-image-state1 {
1082
    background-position: 0px 0;
1083
}
1084

    
1085
.standard .machine .single-image-state3 {
1086
    background-position: -100px 0;
1087
}
1088

    
1089
.standard .machine .single-image-state4 {
1090
    background-position: -150px 0;
1091
}
1092

    
1093
.standard .machine .single-image-state2 {
1094
    background-position: -50px 0;
1095
}
1096

    
1097
.standard .running .machine .logo {
1098
   cursor: pointer;
1099
}
1100

    
1101
.list .machine img {
1102
    margin: 0;
1103
}
1104

    
1105
.icon div.ip, .icon div.ips {
1106
    font-size: 75%;
1107
}
1108

    
1109
div.indicators {
1110
    margin-right: 2px !important;
1111
}
1112
div.indicator1, div.indicator2, div.indicator3, div.indicator4 {
1113
    background-color: #63cf1c;
1114
    width:10px;
1115
    height:11px;
1116
    clear: none;
1117
    float:right;
1118
    -webkit-transition: background-color .75s ease-out;
1119
    -o-transition: background-color .75s ease-out;
1120
    -moz-transition: background-color .75s ease-out;
1121
    transition: background-color .75s ease-out;
1122
}
1123

    
1124
.view-separator {
1125
    color:#5F8DD3;
1126
}
1127

    
1128
.running.disabled {
1129
    background: transparent;
1130
}
1131

    
1132
.running-state .indicator1, .running-state .indicator2, .running-state .indicator3, .running-state .indicator4 {
1133
    background-color: #63cf1c;
1134
}
1135

    
1136
.rebooting-state .indicator1, .rebooting-state .indicator2, .rebooting-state .indicator3, .rebooting-state .indicator4 {
1137
    background-color: #d4aa00;
1138
}
1139

    
1140
.error-state .indicator1, .error-state .indicator2, .error-state .indicator3, .error-state .indicator4 {
1141
    background-color: #ff0000 !important;
1142
}
1143

    
1144
.terminated-state .indicator1, .terminated-state .indicator2, .terminated-state .indicator3, .terminated-state .indicator4 {
1145
    background-color: #5e1616;
1146
}
1147

    
1148
.build-state .indicator1, .build-state .indicator2, .build-state .indicator3, .build-state .indicator4 {
1149
    background-color: #FF7F2A;
1150
}
1151

    
1152
.destroying-state .indicator1, .destroying-state .indicator3, .destroying-state .indicator2, .destroying-state .indicator4 {
1153
    background-color: #4085a5 !important;
1154
}
1155

    
1156
.shutting-state .indicator1, .shutting-state .indicator3, .shutting-state .indicator2, .shutting-state .indicator4 {
1157
    background-color: #940606;
1158
}
1159

    
1160
.starting-state .indicator1, .starting-state .indicator2, .starting-state .indicator3, .starting-state .indicator4 {
1161
    background-color: #9ed976;
1162
}
1163

    
1164
.network-indicator .indicator1, .network-indicator .indicator2, .network-indicator .indicator3, .network-indicator .indicator4 {
1165
    background-color: #63cf1c;
1166
}
1167

    
1168
.network-indicator.in-progress .indicator1, .network-indicator.in-progress .indicator2, .network-indicator.in-progress .indicator3, .network-indicator.in-progress .indicator4 {
1169
    background-color: #FF7F2A;
1170
}
1171

    
1172
.running, .terminated {
1173
    background: #EFF7FA repeat scroll 0 0;
1174
    padding-bottom: 15px;
1175
}
1176

    
1177
.running, #machinesview-list, .single {
1178
}
1179

    
1180
.terminated {
1181
    background:#DCE5E8  repeat scroll 0 0;
1182
    padding-top: 15px;
1183
    margin-top: 15px;
1184
}
1185

    
1186
span.rename {
1187
    background-repeat: no-repeat;
1188
    color: transparent;
1189
    font-size: 75%;
1190
    font-weight: normal;
1191
    margin-left: 10px;
1192
    padding-left: 10px;
1193
    text-align: left;
1194
    cursor: pointer;
1195
}
1196

    
1197
div.name:hover span.rename, span.rename_hovered {
1198
    color: #3D3D3D;
1199
    margin-top: 0.4em;
1200
    background-image: url("../images/pencil.png");
1201
    background-position: 0 3px;
1202
}
1203

    
1204
.machine div.info {
1205
    font-size: 75%;
1206
}
1207

    
1208
div.machine:hover div.info-header, div.machine:hover div.toggler div.down {
1209
    background-color: #84b7d0;
1210
}
1211

    
1212
div.machine div.info-label.darker, .single div.tags-label.darker, div.network .darker {
1213
    background-color: #5CA1C0;
1214
}
1215

    
1216
.machine div.info div.info-label {
1217
    font-size: 75%;
1218
    height:16px;
1219
    width: 30px;
1220
    padding: 1px 0 0 5px;
1221
}
1222

    
1223
.machine div.info div.toggler, .single div.tags div.toggler, div.network div.toggler {
1224
    width:15px;
1225
    height:17px;
1226
    margin-top: -11px;
1227
    margin-left: 37px;
1228
}
1229

    
1230
div.network div.toggler {
1231
    margin-left: 90px;
1232
}
1233

    
1234
.machine div.info div.down {
1235
    background: url(../images/down-arrow.png) no-repeat scroll 1px 1px;
1236
}
1237

    
1238
.single div.tags div.down {
1239
    background: url(../images/down-arrow.png) no-repeat scroll 2px 2px;
1240
}
1241

    
1242
.network div.network-machines div.down {
1243
    background: url(../images/down-arrow.png) no-repeat scroll 2px 2px;
1244
}
1245

    
1246
.network div.network-machine div.firewall div.down {
1247
    background: url(../images/down-arrow.png) no-repeat scroll 2px 2px;
1248
}
1249

    
1250
.machine div.info div.up {
1251
    background: url(../images/up-arrow.png) no-repeat scroll 1px 0;
1252
}
1253

    
1254
.single div.tags div.up {
1255
    background: url(../images/up-arrow.png) no-repeat scroll 2px 2px;
1256
}
1257

    
1258
.network div.network-machines div.up {
1259
    background: url(../images/up-arrow.png) no-repeat scroll 2px 2px;
1260
}
1261

    
1262
.network div.network-machine div.firewall div.up {
1263
    background: url(../images/up-arrow.png) no-repeat scroll 2px 2px;
1264
}
1265

    
1266
button {
1267
    background-color: #87AADE;
1268
    border: 1px solid #87AADE;
1269
    color: #FFFFFF;
1270
    cursor: pointer;
1271
    height: 23px;
1272
    width: 120px;
1273
}
1274

    
1275
button.next {
1276
    background-color: #4085A5;
1277
    border-color: #4085A5;
1278
    text-align: right;
1279
}
1280

    
1281
button.next:hover {
1282
    background-color: #7DB4CD;
1283
    border-color: #7DB4CD;
1284
}
1285

    
1286
button.prev {
1287
    background-color: #4085A5;
1288
    border-color: #4085A5;
1289
    margin-left: -1px;
1290
    text-align: left;
1291
}
1292

    
1293
button.prev:hover {
1294
    background-color: #7DB4CD;
1295
    border-color: #7DB4CD;
1296
}
1297

    
1298
.image-logo {
1299
    float: left;
1300
    margin-right: 1em;
1301
    margin-left: 1.5em;
1302
    margin-top: 4px;
1303
}
1304

    
1305
.icon div.image {
1306
    clear: both;
1307
    display: block;
1308
    margin-bottom: 3px;
1309
    margin-top: 3px;
1310
    padding: 5px;
1311
}
1312

    
1313
div#view-select {
1314
    clear: both;
1315
    color: white;
1316
    position: absolute;
1317
    right: 15px;
1318
    top: 15px;
1319
}
1320

    
1321
a.machines_view_link {
1322
    text-decoration: none;
1323
    font-size: 0.7em;
1324
    padding: 4px;
1325
    padding-right: 8px;
1326
    color: #5CA1C0;
1327
    margin-left: 5px;
1328
    background-repeat: no-repeat;
1329
    background-color: #C9DFEA;
1330
}
1331

    
1332
a.machines_view_link span {
1333
    float: left;
1334
}
1335

    
1336
a.machines_view_link span.ico {
1337
    width: 17px;
1338
    height: 15px;
1339
    margin-right: 10px;
1340
    background-position: -36px 0;
1341
}
1342

    
1343
a.machines_view_link:hover {
1344
    background-color: #A1C8DB;
1345
    color: #fff;
1346
}
1347
a.machines_view_link:hover span.ico {
1348
    background-position: -0px 0px;   
1349
}
1350

    
1351
a.machines_view_link.activelink span.ico {
1352
    background-position: -18px 0px;
1353
}
1354
a.machines_view_link.activelink {
1355
    color: #fff;
1356
    background-color: #5CA1C0;
1357
}
1358

    
1359
div#view-select a {
1360
    display: block;
1361
    float: left;
1362
}
1363

    
1364
a#list:hover {
1365
    background: #5f8dd3;
1366
}
1367

    
1368
a#machines_view_icon_link:active, a#machines_view_list_link:active {
1369
    color:white;
1370
}
1371

    
1372
a#machines_view_icon_link span.ico {
1373
    background-image: url("../images/icon-view.png");
1374
}
1375

    
1376
a#machines_view_list_link span.ico {
1377
    background-image: url("../images/list-view.png");
1378
}
1379

    
1380
a#machines_view_single_link span.ico {
1381
    background-image: url("../images/single-view.png");
1382
}
1383

    
1384
#machinetype {
1385
    background-color: #CDE2EC;
1386
    height: 25px;
1387
    margin-bottom: 0px !important;
1388
}
1389

    
1390
div.machine-type {
1391
    float: left;
1392
    margin: 4px 18px 20px;
1393
}
1394

    
1395
.machine-type .active {
1396
    color: #FFFFFF
1397
}
1398

    
1399
div.machine-type label.disabled {
1400
    color: #aaa !important;
1401
}
1402

    
1403
#machinesview {
1404
}
1405

    
1406
#machines-pane {
1407
}
1408

    
1409
.list#machinesview {
1410
    margin-left: -20px;
1411
    display:none;
1412
}
1413

    
1414
#machinesview-list.list {
1415
    background: #EFF7FA  repeat scroll 0 0;
1416
    padding-left: 15px;
1417
    padding-bottom: 15px;
1418
}
1419

    
1420
#machinesview_content {
1421
    display:none;
1422
}
1423

    
1424
.list-machines {
1425
    min-width: 515px;
1426
}
1427

    
1428
#emptymachineslist {
1429
    background-color: #6BA9C6;
1430
    color: #A0A0A0;
1431
    display: none;
1432
    padding: 65px 150px 35px;
1433
    text-align: justify;
1434
    margin-top: -70px;
1435
}
1436

    
1437
#welcomeheader {
1438
    color:white;
1439
    text-align: center;
1440
}
1441

    
1442
.welcomebody {
1443
    color: white;
1444
    font-size:80%;
1445
}
1446

    
1447
.welcomebody a {
1448
    color: white;
1449
}
1450

    
1451
.welcomefooter {
1452
    color: white;
1453
    font-size:60%;
1454
}
1455

    
1456
.welcomefooter a {
1457
    color: white;
1458
}
1459

    
1460
.emptycreatecontainer {
1461
    margin-left: 430px !important;
1462
    position: absolute;
1463
    margin-top: 5px !important;
1464
    width: 180px;
1465
    background-color: #CCCCCC;
1466
    padding: 5px;
1467
    padding-left: 10px;
1468
}
1469

    
1470
.emptycreate {
1471
    margin: 20px 10px 5px 0 !important;
1472
}
1473

    
1474
#createbody {
1475
    display:none;
1476
    font-size: 80%;
1477
}
1478

    
1479
div.list label img {
1480
    margin: 5px 5px -3px 0;
1481
}
1482

    
1483
div.list label {
1484
    color: #3D3D3D;
1485
    font-size: 75%;
1486
}
1487

    
1488
div.list .state {
1489
    margin-top: 7px;
1490
    margin-right: 10px;
1491
}
1492

    
1493
div.list table tbody {
1494
    margin-top: 8px;
1495
}
1496

    
1497
div.list table tr.checked td {
1498
    background-color: #A1C8DB !important;
1499
}
1500

    
1501
div.list table tr:hover td,
1502
div.list table tr.inactive:hover td,
1503
div.list table tr.error:hover td {
1504
    background-color: #A1C8DB;
1505
    color: #fff;
1506
}
1507

    
1508
div.list table td.name {
1509
    min-width: 170px;
1510
}
1511

    
1512
div.list table td.status {
1513
    font-size: 0.9em !important; 
1514
    text-align: right;
1515
    min-width: 90px;
1516
    color: #000;
1517
}
1518

    
1519
div.list table td.flavor {
1520
    font-size: 0.8em;
1521
}
1522

    
1523
div.list table td {
1524
    border-bottom: 1px solid #DDD;
1525
}
1526

    
1527
div.list table tr.error td.status {
1528
    color: #800000 !important;
1529
    font-weight: bold;
1530
}
1531

    
1532
div.list table tr.error td {
1533
    background-color: #DCE5E8;
1534
}
1535

    
1536
div.list table tr.inactive td {
1537
    background-color: #DCE5E8;
1538
}
1539

    
1540
div.list .stopped {
1541
    margin-top: 8px;
1542
}
1543

    
1544
/* root element for tabs  */
1545
#wizard ul.tabs {
1546
    margin-right: -1px;
1547
    float: right;
1548
}
1549

    
1550
#wizard div.panes {
1551
    height: 247px;
1552
    clear:both;
1553
    margin-top: 3px;
1554
}
1555

    
1556
.typebody {
1557
    font-size: 80%;
1558
    font-weight: normal;
1559
    position: relative;
1560
    top: -3px;
1561
}
1562

    
1563
.typehover {
1564
    color: #FFFFFF;
1565
}
1566

    
1567
#label-name {
1568
    margin-top: 10px;
1569
}
1570

    
1571
/* single tab */
1572
#wizard ul.tabs li {
1573
    margin-bottom: 0;
1574
    list-style-type:none;
1575
    float: left;
1576
}
1577

    
1578
/* link inside the tab. uses a background image */
1579
#wizard ul.tabs a {
1580
    display:block;
1581
    padding: 0.2em 0.5em 0.1em 0.4em;
1582
    text-decoration:none;
1583
    color: #FFFFFF;
1584
    position:relative;
1585
    top:1px;
1586
    outline:0;
1587
    background-color: transparent;
1588
    text-align: center;
1589
    width: 100px;
1590
    white-space: nowrap;
1591
    height: 17px;
1592
}
1593

    
1594
#wizard ul.tabs a:hover {
1595
    color: #FFFFFF;
1596
    background-color:#4085A5;
1597
}
1598

    
1599
/* selected tab */
1600
#wizard ul.tabs a.current {
1601
    color: white;
1602
    background-color: #7DB4CD;
1603
    cursor: default;
1604
}
1605

    
1606
#wizard #standard-images {
1607
    background-color: #ECF4F8;
1608
}
1609

    
1610
div.list div.actions {
1611
    display: none;
1612
    clear: left;
1613
    float: right;
1614
    margin-right: 15px;
1615
    margin-top: 37px;
1616
    text-align: right;
1617
    width: 120px;
1618
}
1619

    
1620
div.list div.actions a {
1621
    clear: left;
1622
    color: #A1A1A1;
1623
    display: block;
1624
    font-size:75%;
1625
    margin-bottom: 2px;
1626
}
1627

    
1628
div.list div.actions a:hover {
1629
    background-color: transparent;
1630
}
1631

    
1632
div.list div.actions a.enabled {
1633
    color: #3D3D3D;
1634
}
1635

    
1636
div.list div.actions a.enabled:hover{
1637
    cursor: pointer;
1638
    color: black;
1639
    text-decoration: underline;
1640
}
1641

    
1642
div.list div.actions a.selected {
1643
    color: #FF7F2A !important;
1644
}
1645

    
1646
input.machine {
1647
    width: 13px;
1648
    height: 13px;
1649
    top: -1px;
1650
    overflow: hidden;
1651
}
1652

    
1653
.description-container {
1654
    display: inline-block;
1655
    position: relative;
1656
    width: 300px;
1657
}
1658

    
1659
#wizard .button-container {
1660
    height: 20px;
1661
}
1662

    
1663

    
1664
/* metadata dropdown combo */
1665
.meta-key {
1666
    margin-right: 18px;
1667
    float:left;
1668
}
1669

    
1670
/* notification box */
1671
#yes-no {
1672
    height: 150px;
1673
    z-index: 9999;
1674
    border-bottom: 5px solid #4085A5;
1675
}
1676

    
1677
#yes-no p, #yes-no button {
1678
    margin-top: 15px;
1679
}
1680

    
1681
#error-success, .notification-box {
1682
    z-index: 9999;
1683
    border-bottom: 5px solid #4085A5;
1684
    min-height: 150px;
1685
    top: 50px !important;
1686
    position: absolute;
1687
}
1688

    
1689
#error-success p, .notification-box p {
1690
    margin-top: 5px;
1691
}
1692

    
1693
.error-report {
1694
    display: none;
1695
}
1696

    
1697
#error-success .error-report {
1698
    position: absolute;
1699
    top: 140px;
1700
    right: 40px;
1701
}
1702

    
1703
.error .error-report {
1704
    display: block;
1705
}
1706

    
1707
#error-success .error-report .errormsg {
1708
    display: none;
1709
}
1710

    
1711
#error-success .error-report .success {
1712
    display: none;
1713
}
1714

    
1715
#error-success .error-report .sending {
1716
    display: none;
1717
}
1718

    
1719
#error-success .error-report .send-btn {
1720
    color: #4085A5;
1721
    text-decoration: underline;
1722
    cursor: pointer;
1723
}
1724

    
1725
#error-success strong, .notification-box strong {
1726
    color: #F49C1A;
1727
}
1728

    
1729
#error-success .close, .notification-box .close {
1730
    background-image: url("../images/close-popup.png");
1731
    background-repeat: no-repeat;
1732
    cursor: pointer;
1733
    height: 13px;
1734
    position: absolute;
1735
    right: 7px;
1736
    top: 9px;
1737
    width: 13px;
1738
}
1739

    
1740
.popup-header-error {
1741
    background-color: #800000 !important;
1742
}
1743

    
1744
.popup-border-error {
1745
    border-color: #800000 !important;
1746
    width:auto;
1747
}
1748

    
1749
.popup-details-error {
1750
    border: none !important;
1751
}
1752

    
1753
.popup-separator-error {
1754
    margin-bottom: 5px !important;
1755
}
1756

    
1757
#error-success .popup-header, .notification-box .popup-header {
1758
    background-color: #4085A5;
1759
    color: white;
1760
    font-size: 95%;
1761
    font-weight: normal;
1762
    height: 20px;
1763
    margin-left: -16px;
1764
    margin-top: -16px;
1765
    padding-bottom: 2px;
1766
    padding-left: 30px;
1767
    padding-top: 10px;
1768
    width: 482px;
1769
    margin-right:-16px;
1770
}
1771

    
1772

    
1773
#error-success.success h3 span.header-box, .notification-box h3 span.header-box {
1774
    background-color: #71c837;
1775
    display: block;
1776
    background-image: url("../images/save-green.png");
1777
    background-position: right 0;
1778
    background-repeat: no-repeat;
1779
    width: 80px;
1780
    padding: 3px 3px 3px 8px;
1781
    margin-top: -6px;
1782
    font-size: 90% !important;
1783
    margin-left: -11px;
1784
}
1785

    
1786
#error-success .popup-body, .notification-box .popup-body {
1787
    background: url("../images/popup-bg.png") repeat-x scroll 0 0 transparent;
1788
    margin-left: -16px;
1789
    margin-right: -16px;
1790
    margin-top: 1px;
1791
    min-height: 142px;
1792
    padding-top: 10px;
1793
}
1794

    
1795
#error-success .popup-body-inner, .notification-box .popup-body-inner {
1796
    background: url("../images/popup-inner-bg.png") repeat-x scroll 0 0 transparent;
1797
    font-size: 80%;
1798
    min-height: 120px;
1799
    margin-left: 20px;
1800
    padding-left: 15px;
1801
    width: 460px;
1802
}
1803

    
1804
#error-success .popup-separator, .notification-box .popup-seperator {
1805
    background-color: #74AEC9;
1806
    height: 1px;
1807
    font-size:1%;
1808
    width: 442px;
1809
    margin-bottom: 30px;
1810
}
1811

    
1812
#error-success .machine-now-building {
1813
    font-size: 95%;
1814
    padding-bottom: 7px;
1815
    padding-top: 10px;
1816
}
1817

    
1818
#error-success.success .machine-now-building {
1819
    padding-bottom: 14px !important;
1820
}
1821

    
1822
#error-success .password-container, .notification-box .password-container {
1823
    width: 430px;
1824
    padding: 5px;
1825
    border: 2px solid #75b54a;
1826
    background-color: #aade87;
1827
}
1828

    
1829
#error-success .password-header, .notification-box .password-header {
1830
    margin-bottom: 5px;
1831
}
1832

    
1833
#error-success .password, .notification-box .password {
1834
    color: #447821;
1835
}
1836

    
1837
#error-success .popup-details, .notification-box .popup-details {
1838
    border: 2px solid #FF7F2A;
1839
    float: left;
1840
    margin-left: 10px;
1841
    padding: 2px;
1842
}
1843

    
1844
#error-success.success .popup-details, .notification-box .popup-details {
1845
    border: none !important;
1846
    float: none !important;
1847
    margin-left: none !important;
1848
    margin-top: 10px;
1849
}
1850

    
1851
#error-success.success .popup-separator, .notification-box .popup-seperator {
1852
    margin-bottom: 14px !important;
1853
}
1854

    
1855
#error-success .write-password, .notification-box .write-password {
1856
    margin-bottom: 5px;
1857
    padding-left: 30px;
1858
}
1859

    
1860
#error-success .write-password-password, .notification-box .write-password-password {
1861
    padding-left: 30px;
1862
    color: #447821;
1863
    display: inline;
1864
    font-size: 110%;
1865
    font-weight: bold;
1866
}
1867

    
1868
#error-success .write-password-details, .notification-box .write-password-details {
1869
    font-size: 75%;
1870
}
1871

    
1872
.more-details {
1873
    display: block;
1874
}
1875

    
1876
.notification-box h3 span.header-box {
1877
    background: transparent;
1878
}
1879

    
1880
.notification-box .machine-now-building {
1881
    padding: 20px 0;
1882
}
1883

    
1884
.notification-box .header-box {
1885
    width: auto !important;
1886
}
1887

    
1888
.notification-box .password {
1889
    text-align: center;
1890
}
1891
.notification-box .password a:hover {
1892
    background-color: #447821;
1893
    color: #fff;
1894
}
1895

    
1896
.notification-box .password a {
1897
    padding: 0.2em;
1898
    text-align: center;
1899
    color: #447821;
1900
    font-weight: bold;
1901
    font-size: 1.2em;
1902
    text-decoration: none;
1903
}
1904

    
1905
.popup-details a:link, .popup-details a:visited {
1906
    color: black;
1907
}
1908

    
1909
.destroy .confirm_single .yes {
1910
    background-color: #880000;
1911
    color: #fff;
1912
}
1913

    
1914
.destroy .confirm_single .no {
1915
    background-color: #CC0000;
1916
    color: #880000;
1917
}
1918

    
1919
.destroy .confirm_single .yes:hover {
1920
    background-color:#CC0000;
1921
}
1922

    
1923
div.list div.actions a.selected#action-destroy {
1924
    color: #880000 !important;
1925
}
1926

    
1927
.vm-actions .destroy a#action-destroy.selected {
1928
    color: #880000 !important;
1929
}
1930

    
1931
/* Confirmation boxes */
1932
div.confirm_single, div.confirm_multiple, div.action_error {
1933
    display: none;
1934
    color: black;
1935
}
1936

    
1937
div.confirm_single button, div.confirm_multiple button, div.action_error button {
1938
    font-size: 100%;
1939
    cursor: pointer;
1940
    color: black;
1941
    height: 20px !important;
1942
}
1943

    
1944
div.confirm_single button {
1945
    border: none;
1946
    font-family: Arial, Helvetica, sans-serif;
1947
    line-height: 1em;
1948
    vertical-align: middle;
1949
    padding: 2px 6px;
1950
    padding-bottom:4px;
1951
    height: 15px;
1952
}
1953

    
1954
div.confirm_single button.yes {
1955
    width: 90px;
1956
    background-color:#FF7F2A;
1957
}
1958

    
1959
div.confirm_single button.yes:hover {
1960
    background-color: #FF9955;
1961
}
1962

    
1963
div.confirm_single button.no {
1964
    width: 20px;
1965
    margin-left:-5px;
1966
    background-color: #FF9955;
1967
    color:#d95d0a;
1968
}
1969

    
1970
div.confirm_single button.no:hover {
1971
    color: white;
1972
}
1973

    
1974
div.confirm_multiple_cont {
1975
    background-color: #406A7D;
1976
    margin-top: 0px;
1977
    padding: 3px;
1978
    border-top: 1px solid #444;
1979
    border-bottom: 1px solid #444;
1980
    padding-top:0px;
1981
    margin-top: -1px;
1982
}
1983

    
1984
div.confirm_reboot_required {
1985
}
1986

    
1987
div.confirm_multiple {
1988
    font-size: 65%;
1989
    z-index: 8000;
1990
    /*height: 28px;*/
1991
    width: 700px;
1992
    margin-top: 15px;
1993
}
1994

    
1995
div.confirm_multiple p {
1996
    float: left;
1997
    color: #FFF;
1998
    font-weight: bold;
1999
    margin: 7px 0 0 10px;
2000
}
2001

    
2002
#networks-pane {
2003
    display: none;
2004
}
2005

    
2006
#networks-pane div.confirm_multiple p {
2007
    margin: 7px 0 0 100px;
2008
}
2009

    
2010
div.confirm_multiple button {
2011
    float: right;
2012
    background-color: transparent;
2013
    border: 1px solid #5CA1C0;
2014
    margin: 4px 5px 0 0;
2015
}
2016

    
2017
div.confirm_multiple button.yes {
2018
    border-color: #FF7F2A;
2019
    padding: 0 12px;
2020
}
2021

    
2022
div.confirm_multiple button.yes:hover {
2023
    background-color: #FF7F2A;
2024
}
2025

    
2026
div.confirm_multiple button.no {
2027
    padding: 0px 16px;
2028
}
2029

    
2030
div.confirm_multiple button.no:hover {
2031
    background-color: #5CA1C0;
2032
}
2033

    
2034
div.action_error {
2035
    width: 120px;
2036
    margin: 14px 0 0 37px;
2037
    background-color: #981D1D;
2038
    font-size: 75%;
2039
    z-index:1;
2040
    color: #FFF;
2041
    position:absolute;
2042
    top: 0px;
2043
}
2044

    
2045
div.action_error .action-error-msg {
2046
    background-color: #fff;
2047
    color: #981D1D;
2048
    border: 1px solid #981D1D;
2049
    padding: 4px;
2050
}
2051
div.action_error .action-error-msg .action {
2052
    font-weight: bold;
2053
}
2054

    
2055
div.action_error .action-error-msg {
2056
    font-size: 0.8em;
2057
}
2058

    
2059
.action_error button {
2060
    width: 75px;
2061
    background-color: transparent;
2062
    border: 1px solid;
2063
    border-color: #981D1D;
2064
    color: #fff !important;
2065
    float: left;
2066
}
2067

    
2068
div.action_error button.details {
2069
    padding-right: 5px;
2070
    width: 100px;
2071
    border-bottom: 2px solid #981D1D;
2072
    border-right: 1px solid #981D1D;
2073
    border-left: 2px solid #981D1D;
2074
    background-color: #E24B4B;
2075
}
2076

    
2077
div.action_error button.close-action-error {
2078
    background-image: url("../images/option-action-remove.png");
2079
    background-color: #fff;
2080
    background-repeat: no-repeat;
2081
    background-position: center center;
2082
    width: 20px;
2083
    border-bottom: 2px solid #981D1D;
2084
    border-right: 2px solid #981D1D;
2085
    border-top: 1px solid #981D1D;
2086
}
2087

    
2088
div.action_error button.details:hover {
2089
    background-color: #FF7F2A;
2090
}
2091

    
2092
div#aboutuser{
2093
    float:right;
2094
    clear: both;
2095
    color: #FFFFFF;
2096
    font-size: 75%;
2097
    margin-top: -25px;
2098
}
2099

    
2100
div#user{
2101
    clear: both;
2102
    color: #FFFFFF;
2103
    font-size: 75%;
2104
    margin-top: 38px;
2105
    padding-bottom: 10px;
2106
    position: absolute;
2107
    right:0;
2108
}
2109

    
2110
div#user a{
2111
    color: #FFFFFF;
2112
    text-decoration: none;
2113
}
2114

    
2115
div#user a.current_lang {
2116
    color: #72ADC8;
2117
}
2118

    
2119
div#user .usermenu {
2120
    float: left;
2121
    cursor: pointer;
2122
    overflow: hidden;
2123
    padding-top: 5px;
2124
    margin-top: -6px;
2125
    position: relative;
2126
}
2127

    
2128
div#user .username {
2129
    display: block;
2130
    margin-right: 10px;
2131
    padding-right: 18px;
2132
    padding-left: 4em;
2133
    min-width: 70px;
2134
    text-align: right;
2135
    height: 20px;
2136
    background: url("../images/down-arrow-light.png") no-repeat right;
2137
    background-position: right 6px;
2138
    font-weight: normal;
2139
}
2140

    
2141
div#user .hovered {
2142
    background: #599EBD;
2143
    overflow: visible;
2144
    border-bottom: 1px solid #C7DFE9;
2145
}
2146

    
2147
div#user .hovered .username {
2148
    background-image: url("../images/down-arrow-lighter.png");
2149
}
2150

    
2151
div#user .active {
2152
    background-color: #BED5E0 !important;
2153
}
2154

    
2155
div#user .active .username {
2156
    color: #599EBD;
2157
    background-image: url("../images/down-arrow-lighter.png");
2158
}
2159

    
2160
div#user .useractions {
2161
    display: none;
2162
}
2163

    
2164
div#user .active .useractions {
2165
    display: block;
2166
    text-align: right;
2167
    color: #4085A5;
2168
    background-color: #D0E3ED;
2169
    margin-top:-1px;
2170
    border-top:1px solid #fff;
2171
    position: relative;
2172
    top: 1px;
2173
    box-shadow: 1px 1px 1px #aaa;
2174
    -moz-box-shadow: 1px 1px 1px #aaa;
2175
    -webkit-box-shadow: 1px 1px 1px #aaa;
2176
}
2177

    
2178
div#user .useractions li {
2179
    padding: 2px 10px;
2180
    border-bottom: 1px solid #efefef;
2181
    text-align: right;
2182
    display: block;
2183
    background-color: transparent;
2184
}
2185

    
2186
div#user .useractions li a {
2187
    color: #4085A5;
2188
    display: inline-block;
2189
    padding:5px 0;
2190
    padding-left: 30px;
2191
    padding-bottom: 6px;
2192
    background-repeat: no-repeat;
2193
    background-position: center left;
2194
}
2195

    
2196
div#user .useractions li.hovered {
2197
    background-color: #E1EFF6;
2198
}
2199

    
2200
div#user .useractions li.last {
2201
    border-bottom: none;
2202
}
2203

    
2204
div#user .useractions .logout a {
2205
    background-image: url("../images/icon-logout.png");
2206
}
2207

    
2208
div#user .langmenu {
2209
    float: left;
2210
    border-left: 1px solid #ffffff;
2211
    padding-left: 10px;
2212
    margin-left: -1px;
2213
}
2214

    
2215
div#user .langmenu .sep {
2216
    display: inline-block;
2217
    color: #72ADC8;
2218
}
2219

    
2220
.separator {
2221
    background-color: #74AEC9;
2222
    height: 10px;
2223
    width: 700px;
2224
    font-size: 1px;
2225
    line-height: 0px;
2226
}
2227

    
2228
#disks.separator {
2229
    background-color: #dea842;
2230
}
2231

    
2232
#networks.separator {
2233
    background-color: #6c535d;
2234
}
2235

    
2236
.network-machine h5 {
2237
    margin-bottom: 20px;
2238
    margin-top:0px;
2239
}
2240

    
2241
.machine-container .separator {
2242
    width: 508px;
2243
    height: 1px;
2244
    margin-top: 2px;
2245
    background-color: #5CA1C0;
2246
    margin-left: 13px;
2247
}
2248

    
2249
.editbuttons {
2250
    display: block;
2251
    clear: none;
2252
    width: 40px;
2253
    margin-right: 0px;
2254
    padding-top: 0px;
2255
    float: right;
2256
    cursor: pointer;
2257
    position: relative;
2258
    z-index: 1000;
2259
}
2260

    
2261
div.editbuttons div.save:hover, div.editbuttons div.cancel:hover {
2262
    background-color: #84b7d0;
2263
}
2264

    
2265
div.editbuttons div.cancel:hover {
2266
    background-image: url("../images/cancel-onhover.png");
2267
}
2268

    
2269
.editbuttons .cancel, .editbuttons .save {
2270
    background-repeat: no-repeat;
2271
    color: transparent;
2272
    height: 16px;
2273
    width: 16px;
2274
    float: left;
2275
}
2276

    
2277
.editbuttons .cancel {
2278
    background-image: url("../images/cancel.png");
2279
    margin-left: 3px;
2280
}
2281

    
2282
.editbuttons .save {
2283
    background-image: url("../images/save.png");
2284
    margin-left: 1px;
2285
}
2286

    
2287
.editbuttons img {
2288
    float:none !important;
2289
    margin: 0px !important;
2290
}
2291

    
2292
.network .namecontainer {
2293
    font-size: 1.1em;
2294
}
2295
.network .machine-name-div .namecontainer {
2296
    font-size: 1em;
2297
    font-weight: bold;
2298
}
2299

    
2300

    
2301
.namecontainer .name {
2302
    position: relative;
2303
}
2304

    
2305
.namecontainer .name .nametextbox, .network-rename-input {
2306
    z-index: 1000;
2307
}
2308

    
2309
.icon .nametextbox {
2310
    width: 255px;
2311
}
2312

    
2313
.nametextbox, .network-rename-input {
2314
    position: relative;
2315
    top: -3px;
2316
    font-size: 65%;
2317
    width: 240px;
2318
    border: 1px solid #aaaaaa;
2319
    padding: 2px;
2320
}
2321

    
2322
.large-spinner {
2323
    background: url("../images/icons/indicators/large/progress.gif");
2324
    margin-left: 298px;
2325
    margin-top: 0px;
2326
    height: 31px;
2327
    width: 49px;
2328
    position: absolute;
2329
    top: 200px;
2330
}
2331

    
2332
#machinesview-icon .large-spinner {
2333
    top: 170px;
2334
}
2335

    
2336
.list .large-spinner {
2337
    margin-top:-30px;
2338
}
2339

    
2340
.single .large-spinner {
2341
    margin-top: 50px;
2342
}
2343

    
2344
div#networks-container {
2345
    display: none;
2346
}
2347

    
2348
div#networks-container .large-spinner {
2349
    margin-top: 50px;
2350
}
2351

    
2352
/* tables in list view */
2353
div.list div.dataTables_filter {
2354
    font-size: 75%;
2355
    margin-bottom: 12px;
2356
}
2357

    
2358
div.list div.dataTables_filter input{
2359
    font-size: 100%;
2360
}
2361

    
2362
.dataTables_wrapper {
2363
    width: 515px;
2364
    padding-bottom: 40px;
2365
}
2366

    
2367
div.list table thead .sorting, div.list table thead .sorting_desc, div.list table thead .sorting_asc {
2368
    padding-right: 15px !important;
2369
}
2370

    
2371
div.list table {
2372
    width: 515px;
2373
    font-size: 75%;
2374
}
2375

    
2376
div.list table tbody td {
2377
    color: #3D3D3D;
2378
    padding:6px;
2379
    vertical-align: middle;
2380
    height: 20px;
2381
}
2382

    
2383
div.list table thead tr {
2384
    border-bottom: 1px solid #aaa;
2385
}
2386
div.list table thead tr th {
2387
    background-color: #CDE2EC;
2388
    background-image: url("../images/bg.gif");
2389
    background-repeat: no-repeat;
2390
    background-position: right 11px;
2391
    font-weight: normal;
2392
    border: 1px solid transparent;
2393
    border-bottom: none;
2394
    padding: 4px;
2395
    text-align: left;
2396
    vertical-align: middle;
2397
    cursor: pointer;
2398
}
2399

    
2400
div.list table thead .sorting_asc, div.list table thead .sorting_desc {
2401
    background-color: #5CA1C0;
2402
}
2403

    
2404
div.list table thead .sorting_asc {
2405
    background-image: url("../images/asc.gif");
2406
}
2407

    
2408
div.list table thead .sorting_desc {
2409
    background-image: url("../images/desc.gif");
2410
}
2411

    
2412
div.list table .selection div.expand-icon {
2413
    background-image: url("../images/asc.gif");
2414
    background-repeat: no-repeat;
2415
    position: relative;
2416
    cursor: pointer;
2417
    width: 15px;
2418
    height: 4px;
2419
    left: 19px;
2420
    top: -11px;
2421
}
2422

    
2423
ul.dropdown-selector {
2424
    background-color: #E6EEEE;
2425
    position: absolute;
2426
    margin-left: 1px;
2427
    display: block;
2428
    top: 255px;
2429
    font-size:75%;
2430
    width:40px;
2431
}
2432

    
2433
ul.dropdown-selector li {
2434
    padding: 4px;
2435
}
2436

    
2437
ul.dropdown-selector li:hover {
2438
    background-color: #5CA1C0;
2439
}
2440

    
2441
ul.dropdown-selector li a{
2442
    color: black;
2443
    text-decoration: none;
2444
}
2445

    
2446
div.list table span.imagetag {
2447
    display: none;
2448
}
2449

    
2450
div.list table thead .vmos {
2451
    width: 20px !important;
2452
    vertical-align:middle;
2453
}
2454

    
2455
div.list table .selection {
2456
    width: 20px !important;
2457
    text-align: left;
2458
    background-image: none;
2459
    padding-left: 6px;
2460
}
2461

    
2462
div.list table thead .vmflavor {
2463
    width: 100px !important;
2464
}
2465

    
2466
/* group column commented out for v0.5
2467
div.list table thead .vmgroup {
2468
    width: 40px !important;
2469
}
2470
*/
2471

    
2472
div.list table thead .vmstatus {
2473
    width: 50px !important;
2474
}
2475

    
2476
div.list table thead .vmname {
2477
    width: 110px !important;
2478
}
2479

    
2480
.spinner, .action-indicator {
2481
    clear: right;
2482
    float:right;
2483
    margin: 10px 6px 0 15px;
2484
}
2485

    
2486
.icon .spinner {
2487
    margin: 20px 4px 0 15px !important;
2488
}
2489

    
2490
.single .state .spinner {
2491
    margin: 20px 55px 0 15px !important;
2492
}
2493

    
2494
.action-indicator {
2495
    margin-right: 18px;
2496
}
2497

    
2498
.list span.action-indicator {
2499
    display: block;
2500
    width: 15px;
2501
    height: 20px;
2502
    margin: 0 !important;
2503
    float: none;
2504
}
2505

    
2506
.wave {
2507
    clear: right;
2508
    float:right !important;
2509
    margin: 10px 15px 0 15px !important;
2510
}
2511

    
2512
#networks-pane .spinner {
2513
    margin-top: 18px !important;
2514
}
2515

    
2516
.hidden {
2517
    display:none;
2518
}
2519

    
2520
div.actions a.selected, div.actions a.selected:hover, div.machine-actions a.selected, div.machine-actions a.selected:hover {
2521
    display:block !important;
2522
}
2523

    
2524
.action_error .message, .action_error .code {
2525
    display: none;
2526
}
2527

    
2528
.fixed {
2529
    bottom: 0;
2530
    position: fixed !important;
2531
}
2532

    
2533
/* Networks */
2534
#networks-pane {
2535
    background-color: transparent;
2536
    color: black;
2537
}
2538

    
2539
#networkscreate {
2540
}
2541

    
2542
.createbutton {
2543
    color: black;
2544
    background-color: #FF7F2A;
2545
    cursor: pointer;
2546
    padding: 7px 24px;
2547
    text-decoration: none;
2548
    border-left: 15px solid #FF9955;
2549
    margin-left: -15px;
2550
}
2551

    
2552
#networkscreate:hover {
2553
    background-color: #FF9955;
2554
}
2555

    
2556
#createcontainer {
2557
}
2558

    
2559
#networks-container {
2560
}
2561

    
2562
#networks-pane .public-networks {
2563
    background: #EFF7FA repeat scroll 0 0;
2564
    margin: 0 0 0px;
2565
    padding: 0 0 15px 0px;
2566
}
2567

    
2568
#networks-pane .private-networks .network:last-child {
2569
    border-bottom: none;
2570
}
2571

    
2572
#networks-pane .private-networks {
2573
    background: #EFF7FA repeat scroll 0 0;
2574
    padding: 15px 20px 20px 0px;
2575
    margin-top: 18px;
2576
}
2577

    
2578
.private-networks .network-cont:last-child {
2579
    border-bottom: none;
2580
}
2581

    
2582
.private-networks .network-cont {
2583
    border-bottom: 1px solid #D1E7F0;
2584
    padding-bottom:5px;
2585
    margin-bottom: 5px;
2586
    width: 520px;
2587
}
2588

    
2589
.private-networks .network {
2590
    padding-top: 10px;
2591
    padding-bottom: 10px;
2592
}
2593

    
2594
#public-template, #private-template, #public-machine-template, #private-machine-template {
2595
    display:none;
2596
}
2597

    
2598
div.network-cont.disable-destroy .actions .destroy {
2599
    display: none !important;
2600
}
2601

    
2602
div.network-cont.pending .actions .action-add {
2603
    display: none;
2604
}
2605

    
2606
div.network-cont.in-error .actions .action-add {
2607
    display: none;
2608
}
2609

    
2610
div.network a.action-network-add {
2611
    display: none;
2612
}
2613

    
2614
div.network a.action-network-destroy {
2615
    margin-top: 32px !important;
2616
    width: 50px;
2617
    display: none;
2618
}
2619

    
2620
div.network {
2621
    clear: both;
2622
    padding: 5px 20px 5px 20px;
2623
    width: 480px;
2624
    position: relative;
2625
}
2626

    
2627
#private-template {
2628
    margin: 2px 0 0 -30px;
2629
}
2630

    
2631
div.network-placeholder {
2632
    margin-left: 33px;
2633
}
2634

    
2635
div.private-networks div.network-placeholder {
2636
}
2637

    
2638
div.network-cable {
2639
    border-left: 3px solid #FF7F2A;
2640
    float: left;
2641
    margin-left: -40px;
2642
    margin-top: -45px;
2643
    height: 185px;
2644
    overflow: hidden;
2645
}
2646

    
2647
.first div.network-cable {
2648
    height:143px;
2649
    margin-top:-6px;
2650
    position: relative;
2651
}
2652

    
2653
div.network-contents div.machines-list div.first {
2654
    margin-top:0;
2655
}
2656

    
2657
.last div.network-cable {
2658
    height:85px;
2659
}
2660

    
2661
div.firewall-cable {
2662
    border-left: 3px solid #FF7F2A;
2663
    float: left;
2664
    margin-left: -100px;
2665
    margin-top: -20px;
2666
    height: 110px;
2667
}
2668

    
2669
.last div.firewall-cable {
2670
    display:none;
2671
}
2672

    
2673
div.network a:hover {
2674
    text-decoration: underline;
2675
    cursor: pointer;
2676
}
2677

    
2678
#networks-container .name {
2679
    font-size: 75%;
2680
}
2681

    
2682
div.network-machines, div.firewall {
2683
    font-size: 75%;
2684
    margin-left: 70px;
2685
}
2686

    
2687
div.firewall {
2688
    margin-left: 60px;
2689
    margin-bottom: 3px;
2690
    margin-top: -3px;
2691
}
2692

    
2693
div.firewall .firewall-options {
2694
    float: left;
2695
}
2696

    
2697
div.machines-header, div.firewall-header {
2698
    background-color: #A1C8DB;
2699
    color: white;
2700
    cursor: pointer;
2701
    height: 17px;
2702
    width: 103px;
2703
}
2704

    
2705
 div.private-networks div.machines-header {
2706
    margin-top: -5px;
2707
}
2708

    
2709
div.network:hover div.machines-header, div.network:hover div.firewall-header {
2710
    background-color: #84b7d0;
2711
}
2712

    
2713
div.network-machine:hover div.firewall-header {
2714
    background-color: #5CA1C0;
2715
}
2716

    
2717
div.firewall-label.darker {
2718
    background-color: #4085a5;
2719
}
2720

    
2721
.state {
2722
}
2723

    
2724
.network .state {
2725
    font-size: 75%;
2726
    position: absolute;
2727
    right: 10px;
2728
    top: 5px;
2729
}
2730

    
2731
div.network div.actions {
2732
    float: right;
2733
    font-size: 75%;
2734
    font-weight: normal;
2735
    height: 70px;
2736
    width: 100px;
2737
    position: absolute;
2738
    right: -100px;
2739
    top: 0;
2740
}
2741

    
2742
div.network div.machine-actions {
2743
    text-decoration: none;
2744
    float: right;
2745
    margin: -17px -180px 0 0;
2746
    font-weight: normal;
2747
    font-size: 75%;
2748
}
2749

    
2750
div.network div.actions a, div.network div.machine-actions a {
2751
    text-decoration: none;
2752
    height: 15px;
2753
    color: black;
2754
    visibility: hidden;
2755
    display: block;
2756
}
2757

    
2758

    
2759
div.network div.machine-actions a {
2760
    margin: 8px 0 0 8px;
2761
}
2762
div.network div.net-actions a {
2763
    margin: 0 0 8px 8px;
2764
    width: 168px;
2765
}
2766
div.network div.action-container {
2767
    bottom: auto;
2768
}
2769

    
2770
div.network div.net-actions .confirm_single {
2771
    position: absolute;
2772
    left: 96px;
2773
    width: 150px;
2774
    margin: 0 0px -5px 0;
2775
    font-size: 100%;
2776
}
2777

    
2778
div.network div.actions a:hover, div.network div.machine-actions a:hover {
2779
    display: block;
2780
    background-color:#A1C8DB;
2781
    opacity: 0.8;
2782
    filter: alpha(opacity = 80);
2783
}
2784

    
2785
div.network.expand .net-actions a {
2786
    visibility: visible;
2787
}
2788

    
2789
div.network:hover div.actions a, div.network-machine:hover div.machine-actions a {
2790
    visibility: visible;
2791
}
2792

    
2793
div.network div.machine-actions a.action-destroy.selected {
2794
    color: #880000 !important;
2795
}
2796

    
2797
div.network div.actions a.visible,
2798
div.network div.net-vm-actions a.visible,
2799
div.network div.actions a.selected:hover, div.network div.machine-actions a.selected {
2800
    background-color: transparent !important;
2801
    visibility: visible!important;
2802
}
2803

    
2804
div.network .net-vm-actions .confirm_single {
2805
    font-size: 100% !important;
2806
    margin-right: -20px !important;
2807
    position: absolute !important;
2808
    top: 7px;
2809
    right:0;
2810
}
2811

    
2812
div.network .nic-ip {
2813
  font-size: 0.8em;
2814
}
2815

    
2816
div.network div.display a {
2817
    visibility: visible;
2818
}
2819

    
2820
div.network-machine div.machine-actions a.action-details {
2821
    margin-top: 7px;
2822
    width: 168px;
2823
}
2824

    
2825
div.network .net-actions {
2826
    margin-right:5px !important;
2827
    margin-top:0px !important;
2828
    height: 80px !important;
2829
}
2830

    
2831
div.network .net-actions .action-container.destroy {
2832
    position: relative;
2833
    bottom: auto;
2834
}
2835

    
2836
div.network:hover {
2837
    background-color: #A1C8DB !important;
2838
}
2839

    
2840
.network-logos {
2841
    float:left;
2842
    padding-right: 10px;
2843
}
2844

    
2845
.network-logos:hover {
2846
    cursor: pointer;
2847
}
2848

    
2849
.state div {
2850
    text-align: right;
2851
    margin: 4px 1px -4px;
2852
}
2853

    
2854
.public-networks .state div {
2855
    margin-top: 4px;
2856
}
2857

    
2858
.private-networks .state div {
2859
    margin-top: 9px;
2860
    margin-bottom: -12px;
2861
}
2862

    
2863
.network .name-div {
2864
    margin-bottom: 15px;
2865
    margin-top: 0px;
2866
}
2867

    
2868
div.indicator {
2869
    clear: none;
2870
    float: right;
2871
    height: 11px;
2872
    margin: 3px -1px;
2873
    width: 10px;
2874
}
2875

    
2876
#private-networks {
2877
    margin-top: 20px;
2878
}
2879

    
2880
.private-networks .editbuttons {
2881
    margin-right: 117px;
2882
    margin-top: 1px;
2883
}
2884

    
2885
.private-networks div.confirm_single {
2886
    margin: 45px -219px -5px 0;
2887
    font-size: 80%;
2888
}
2889

    
2890
.private-networks .network-machine div.confirm_single {
2891
    margin: 0 -199px 0 0;
2892
}
2893

    
2894
.private-networks .state {
2895
}
2896

    
2897
.private-networks div.machines-list {
2898
    padding-top: 3px;
2899
}
2900

    
2901
span.rename-network, span.configure {
2902
    background-repeat: no-repeat;
2903
    color: transparent;
2904
    font-size: 75%;
2905
    font-weight: normal;
2906
    margin-left: 10px;
2907
    margin-right: 10px;
2908
    padding-left: 10px;
2909
    text-align: left;
2910
}
2911

    
2912
span.rename-network {
2913
    cursor: pointer;
2914
}
2915

    
2916
div.name-div:hover span.rename-network {
2917
    color: #3D3D3D;
2918
    margin-top: 0.4em;
2919
    background-image: url("../images/pencil.png");
2920
    background-position: 0 3px;
2921
}
2922

    
2923
div.network:hover a.rename {
2924
    color: #3d3d3d;
2925
}
2926

    
2927
.network-separator {
2928
    background-color: #5CA1C0;
2929
    height: 1px;
2930
    margin: 2px 0 0 -5px;
2931
    width: 480px;
2932
    font-size: 1%;
2933
    line-height: 1px;
2934
}
2935

    
2936
.network-contents {
2937
    margin-left: -4px;
2938
    width: 504px;
2939
    clear: both;
2940
    background: url("../images/orange-border.png") no-repeat;
2941
    background-position: 33px bottom;
2942
}
2943
.network-contents.last-expanded {
2944
    background-position-y: -2600px;
2945
}
2946

    
2947
.network-machine {
2948
    border-bottom: 1px solid #5CA1C0;
2949
}
2950
.network-machine:last-child {
2951
    border-bottom: none;
2952
}
2953

    
2954
.network-machine .state div {
2955
    text-align: left;
2956
}
2957

    
2958
.network-machine {
2959
    margin-left: 35px;
2960
    padding-bottom: 10px;
2961
    padding-left: 5px;
2962
    padding-top: 10px;
2963
    position: relative;
2964
}
2965

    
2966
.network-machine .ips {
2967
    position: absolute;
2968
    right:0;
2969
    top:40px;
2970
    text-align: right;
2971
    padding-right: 10px;
2972
    font-size: 70%;
2973
}
2974

    
2975
.network-machine .logo {
2976
    float:left;
2977
    padding-right: 10px;
2978
    position:relative;
2979
}
2980

    
2981
#networks-container .machine-name {
2982
    text-decoration: none !important;
2983
    margin-bottom: 10px;
2984
    color: #000000;
2985
    margin-top: -4px;
2986
}
2987

    
2988
.private-networks .separator {
2989
    background-color: #5CA1C0;
2990
    height: 1px;
2991
    margin: 3px 0 -2px -10px;
2992
    width: 485px;
2993
}
2994

    
2995
.network-machine .state {
2996
    margin-right: 18px;
2997
}
2998

    
2999
.network-machine .state .status {
3000
    margin-bottom: 4px;
3001
}
3002

    
3003
.machine-name .name {
3004
}
3005

    
3006
.machine-name .namecontainer {
3007
    line-height: 18px;
3008
    margin-bottom: 20px;
3009
}
3010

    
3011
div.network-machine:hover {
3012
    background-color: #84B7D0;
3013
}
3014

    
3015
.machines {
3016
    width: 416px;
3017
    margin-bottom: -8px;
3018
    margin-top: 10px;
3019
}
3020

    
3021
div.empty-network-slot {
3022
    height: 60px;
3023
}
3024

    
3025
div.network-remove-machine, div.network-add-machine {
3026
    background-color: #FB822F;
3027
    color: #bc4b00;
3028
    width:90px;
3029
    height:18px;
3030
    float:left;
3031
    margin:40px 0 0 -100px;
3032
}
3033

    
3034
span.remove-icon {
3035
    font-size: 80%;
3036
    margin-left: 15px;
3037
    position: relative;
3038
    bottom:1px;
3039
}
3040

    
3041
div.add-icon {
3042
    margin-left: 15px;
3043
    margin-top: -1px;
3044
    cursor: pointer;
3045
}
3046

    
3047
span.remove-icon:hover, span.add-icon:hover {
3048
    cursor:pointer;
3049
    color: #fff;
3050
}
3051

    
3052
div.network-add-machine {
3053
    margin:43px 0 0 0px;
3054
}
3055

    
3056
.firewall-on {
3057
    color: #42E342;
3058
}
3059

    
3060
.firewall-off {
3061
    color: #F82E2E;
3062
}
3063

    
3064
.firewall-content {
3065
    color: black;
3066
    font-size: 60%;
3067
    margin-left: 60px;
3068
    height: 55px;
3069
}
3070

    
3071
.firewall-content .checkbox-legends {
3072
    cursor: pointer;
3073
}
3074

    
3075
.firewall-content .checkbox-legends.current {
3076
    font-weight: bold;
3077
}
3078

    
3079
.firewall-content .checkbox-legends {
3080
    vertical-align: text-top;
3081
}
3082

    
3083
.checkbox-legends a {
3084
    color: black;
3085
    text-decoration: underline;
3086
    font-size: 100%;
3087
}
3088

    
3089
h5.machine-connect {
3090
    font-size: 75%;
3091
    margin-bottom: 3px;
3092
    height: 23px;
3093
}
3094

    
3095
.machine-connect span {
3096
    text-decoration: underline;
3097
}
3098

    
3099
h5.machine-connect span:hover {
3100
    cursor: pointer;
3101
}
3102

    
3103
.firewall-apply {
3104
    background-color: #4085a5;
3105
    border: medium none;
3106
    float: right;
3107
    font-size: 105%;
3108
    height: 18px;
3109
    margin-right: 5px;
3110
    margin-top: 3px;
3111
    width: 75px;
3112
    position: relative;
3113
    bottom:20px;
3114
}
3115

    
3116
.firewall-apply:hover {
3117
    background-color:#5CA1C0;
3118
}
3119

    
3120
.name-div {
3121
    margin: -9px 0 30px 70px;
3122
}
3123

    
3124
.machine-name-div {
3125
    margin-bottom: 20px;
3126
    margin-left: 60px;
3127
}
3128

    
3129
div.reboot-dialog {
3130
    display: none;
3131
    color: black;
3132
    background-color: #4085A5;
3133
    font-size: 75%;
3134
    margin-top: 15px;
3135
    width: 698px;
3136
    z-index: 1;
3137
}
3138

    
3139
div#reboot-machine-template, div.reboot-machine-entry {
3140
    display: none;
3141
    padding: 0 0 10px 35px;
3142
    width: 300px;
3143
}
3144

    
3145
div.reboot-dialog p {
3146
    color: #FFFFFF;
3147
    padding: 10px 0 10px 10px;
3148
}
3149

    
3150
div.reboot-dialog button {
3151
    float:right;
3152
    border: 1px solid #FF7F2A;
3153
    background-color: transparent;
3154
    font-size:100%;
3155
}
3156

    
3157
div.reboot-dialog button:hover {
3158
    background-color: #FF7F2A;
3159
}
3160

    
3161
div.reboot-dialog button.reboot-all {
3162
    margin: -30px 35px 0 0;
3163
}
3164

    
3165
div.reboot-dialog button.reboot-single {
3166
    color: black;
3167
    margin-top: -20px;
3168
}
3169

    
3170
div.reboot-dialog div.code, div.reboot-dialog div.action, div.reboot-dialog div.message, div.reboot-dialog button.details {
3171
    display:none;
3172
}
3173

    
3174
div.reboot-dialog button.details {
3175
    border-color: #800000;
3176
    margin-top: -20px;
3177
}
3178

    
3179
div.reboot-dialog button.details:hover {
3180
    background-color: #800000;
3181
}
3182

    
3183
/* Metadata */
3184
.machine .info-content {
3185
    display: none;
3186
}
3187

    
3188
.metadata-container {
3189
    line-height: 12px;
3190
    height: 85px;
3191
    background-color: #84b7d0;
3192
}
3193

    
3194
.metadata-column {
3195
    border-right: 1px solid #5CA1C0;
3196
    color: black;
3197
    float: left;
3198
    font-size: 60%;
3199
    margin-top: 3px;
3200
    height: 70px;
3201
    padding-bottom: 5px;
3202
}
3203

    
3204
.vm-stats {
3205
    padding-left: 10px;
3206
    padding-right: 5px;
3207
    width: 220px;
3208
}
3209

    
3210
.vm-stats div.stat-content {
3211
    height: 18px;
3212
}
3213

    
3214
.vm-stats div.stat-content img {
3215
    margin: 0;
3216
}
3217

    
3218
.vm-stats div img.stat-busy {
3219
    margin-top: -7px;
3220
    margin-left: 90px;
3221
}
3222

    
3223
.vm-stats div.stat-content img.busy {
3224
    margin-left: 95px;
3225
}
3226

    
3227
.vm-stats div.stat-error {
3228
    display:none;
3229
}
3230

    
3231
div.stat-error {
3232
    color: #f00;
3233
}
3234

    
3235
.single div.stat-error {
3236
    text-align: center;
3237
    font-size: 0.8em;
3238
}
3239

    
3240
.metadata-column {
3241
    margin-top: 4px;
3242
}
3243

    
3244
.vm-details {
3245
    width: 130px;
3246
    margin-left:17px;
3247
}
3248

    
3249
.vm-details.metadata-column {
3250
    padding-top: 5px;
3251
    height: 65px;
3252
}
3253

    
3254
.vm-details .image-details {
3255
    margin-top: 8px;
3256
}
3257

    
3258
.vm-details .vm-detail {
3259
    display: block;
3260
}
3261

    
3262
.vm-details span.value {
3263
    color: #444;
3264
}
3265

    
3266
.single-container .lower .stat-busy {
3267
    margin-top: 10px;
3268
    margin-left: 325px;
3269
}
3270

    
3271
.vm-metadata {
3272
    padding-left: 10px;
3273
    width: 100px;
3274
    border: none;
3275
}
3276

    
3277
.metadata-left {
3278
}
3279

    
3280
.metadata-right {
3281
    width: 73px;
3282
    float:left;
3283
    height: 35px;
3284
    padding-left: 5px;
3285
    position:relative;
3286
    overflow:hidden;
3287
}
3288

    
3289
.metadata-right .items {
3290
    position:absolute;
3291
    height:20000em;
3292
}
3293

    
3294
.metadata-keys-container {
3295
    height: 60px;
3296
    float: left;
3297
}
3298

    
3299
.single .metadata-keys-container {
3300
    float: none;
3301
    height: auto;
3302
    margin-bottom: 5px;
3303
}
3304

    
3305
.single a.manage-metadata {
3306
    font-size: 80%;
3307
    margin-left:4px;
3308
    color: #383838;
3309
}
3310

    
3311
a.manage-metadata, a.stats-report {
3312
    font-size: 100%;
3313
    color: black;
3314
    margin-left:17px;
3315
    text-decoration: underline;
3316
}
3317

    
3318
a.stats-report {
3319
    margin: 15px 0  0 80px;
3320
}
3321

    
3322
div.machine a.manage-metadata:hover {
3323
    background-color: transparent;
3324
}
3325

    
3326
.single .metadata-actions, .single .metadata-keys-container .items {
3327
    padding-left: 5px;
3328
}
3329
.metadata-actions, .metadata-keys-container .items{
3330
    margin-top: 5px;
3331
}
3332

    
3333
.singe .metadata-actions, .single .metadata-keys-container .items{
3334
    font-size: 80%;
3335
    line-height: 12px;
3336
    width: 300px;
3337
}
3338

    
3339
.metadata-actions .prev,  .metadata-actions .next{
3340
    float:left;
3341
    width:29px;
3342
    height:6px;
3343
    cursor: pointer;
3344
}
3345

    
3346
.metadata-actions .prev {
3347
    background: url("../images/roll-up.png") no-repeat scroll 0 0 transparent;
3348
}
3349

    
3350
.metadata-actions .next {
3351
    background: url("../images/roll-down.png") no-repeat scroll 0 0 transparent;
3352
}
3353

    
3354
.scrollable {
3355
    position:relative;
3356
    overflow:hidden;
3357
    height: 35px;
3358
    width: 120px;
3359
    margin-bottom:2px;
3360
}
3361

    
3362
.scrollable .items {
3363
    position:absolute;
3364
    height:20000em;
3365
}
3366

    
3367
/* single view */
3368
.single {
3369
    color: #383838;
3370
}
3371

    
3372
.single .column1 {
3373
    float: left;
3374
    margin: 1px 0 25px 17px;
3375
    width: 140px;
3376
}
3377

    
3378
.single .column1 .state {
3379
    float: left;
3380
    margin-left: 4px;
3381
    padding-bottom: 6px;
3382
    padding-top: 3px;
3383
    position: relative;
3384
    right: 0;
3385
    text-align: center;
3386
    width: 126px;
3387
}
3388

    
3389
.single .column1 .state-label {
3390
    padding-top: 5px;
3391
}
3392

    
3393
.single .column1 .indicators {
3394
    margin-right: 38px !important;
3395
}
3396

    
3397
.single div.connect-arrow {
3398
    margin-left: -17px;
3399
}
3400

    
3401
.single div.connect-border {
3402
    margin-left: -29px;
3403
}
3404

    
3405
.single .single-actions {
3406
    width: 150px;
3407
    height: 60px;
3408
    margin-bottom: 45px;
3409
    margin-left: -10px;
3410
}
3411

    
3412
.single .vm-actions .action-container {
3413
    margin-bottom: 1px;
3414
}
3415

    
3416
.single .vm-actions .action-container .confirm_single {
3417
    right: -45px;
3418
}
3419

    
3420
.single .vm-actions .action-container.destroy .confirm_single {
3421
}
3422

    
3423
.single .vm-actions .action-container.destroy {
3424
    bottom: -20px;
3425
}
3426

    
3427
.single a.single-action {
3428
    text-decoration: none;
3429
    cursor: pointer;
3430
    display: block;
3431
}
3432

    
3433
.single a.single-action:hover {
3434
    background-color:#A1C8DB;
3435
    width: 162px;
3436
    opacity: 0.8;
3437
    filter: alpha(opacity = 80);
3438
}
3439

    
3440
.single .destroy a.single-action.selected {
3441
    color: #880000 !important;
3442
}
3443

    
3444
.single a.single-action.selected {
3445
    color: #FF7F2A !important;
3446
    width: 50px !important;
3447
}
3448

    
3449
.single a.single-action.selected:hover {
3450
    background-color:transparent;
3451
}
3452

    
3453
.single .spinner, .single .action-indicator {
3454
    margin: 15px 45px 0 0px !important
3455
}
3456

    
3457
.single .action-indicator {
3458
    margin-right: 55px !important;
3459
}
3460

    
3461
.single .wave {
3462
    margin: 15px 53px 0 0px !important
3463
}
3464

    
3465
.icon div.action_error {
3466
    font-size: 100%;
3467
}
3468

    
3469
.single div.action_error {
3470
    position: absolute;
3471
    top: 29px;
3472
    right: 35px;
3473
}
3474

    
3475
.single .column2 {
3476
    background-color: #A1C8DB;
3477
    float: left;
3478
    font-size: 78%;
3479
    line-height: 17px;
3480
    margin: 0 0 10px 5px;
3481
    width: 358px;
3482
}
3483

    
3484
.single .column2 .machine-labels {
3485
    float: left;
3486
    font-size: 90%;
3487
    margin-left: 10px;
3488
    margin-top: 10px;
3489
    width: 125px;
3490
}
3491

    
3492
.single .machine-detail.title {
3493
    background-color: #74AEC9;
3494
    color: #fff;
3495
    padding: 4px 6px;
3496
    font-size: 0.8em;
3497
    width: 346px;
3498
    margin-left: 5px;
3499
    float: left;
3500
}
3501

    
3502
.single .column2 .machine-details {
3503
    float: right;
3504
    text-align: right;
3505
    font-size: 90%;
3506
    width: 210px;
3507
    margin-right: 10px;
3508
    margin-top: 10px;
3509
}
3510

    
3511
.single .column2 .name, .single .column2 .disk, .single .column2 .image-size, .single .column2 .ipv6 {
3512
    margin-bottom: 13px;
3513
}
3514

    
3515
.single .tags {
3516
    clear: both;
3517
    margin-bottom: 10px;
3518
    margin-left: 10px;
3519
}
3520

    
3521
.single .tags-label {
3522
    float: left;
3523
    padding: 0 5px;
3524
    width: 30px;
3525
}
3526

    
3527
.single .tags-down-arrow {
3528
    background: url("../images/tags-down-arrow.png") no-repeat scroll 1px 7px transparent;
3529
    float: left;
3530
    height: 16px;
3531
    width: 9px;
3532
}
3533

    
3534
.single .tags-header .info-header{
3535
    padding-top:0;
3536
    padding-bottom:0;
3537
}
3538

    
3539
.single .tags-header {
3540
    font-size: 0.62em;
3541
    cursor: pointer;
3542
    float: left;
3543
    margin-bottom:5px;
3544
}
3545

    
3546
.single .tags-header span.label {
3547
    font-size: 104%;
3548
}
3549

    
3550
.single .tags-content {
3551
    background-color: #84B7D0;
3552
    clear: both;
3553
    height: auto;
3554
    padding-bottom: 5px;
3555
    padding-top: 5px;
3556
    width: 300px;
3557
}
3558

    
3559
.single .column3 {
3560
    background-color: #A1C8DB;
3561
    width: 150px;
3562
    overflow: visible;
3563
    padding-bottom: 10px;
3564
    position: absolute;
3565
    right: 20px;
3566
    top: 130px;
3567
}
3568

    
3569
.single .col3 {
3570
    float: right;
3571
    width: 150px;
3572
    margin-right: 15px;
3573
    margin-bottom: 15px;
3574
}
3575

    
3576
.single .column3 .controls {
3577
    font-size: 80%;
3578
    height: 20px;
3579
    padding-left: 7px;
3580
    padding-right: 7px;
3581
    padding-top: 8px;
3582
    padding-bottom: 5px;
3583
    border-bottom: 1px solid #84B7D0;
3584
}
3585

    
3586
.single .column3 .vm-control:hover {
3587
    background-color: #5CA1C0;
3588
}
3589

    
3590
.single .column3 .previous {
3591
    float:left;
3592
    width: 72px;
3593
}
3594

    
3595
.single .column3 .next {
3596
    float: right;
3597
    text-align: center;
3598
    width: 60px;
3599
}
3600

    
3601
.single .column3 .next-label {
3602
    float: right;
3603
    margin-right: 3px;
3604
    margin-top: -2px;
3605
}
3606

    
3607
.single .column3 .next-arrow {
3608
    float: right;
3609
    height: 18px;
3610
    width: 10px;
3611
    background: url("../images/right-arrow.png") no-repeat scroll 3px 2px transparent;
3612
}
3613

    
3614
.single .column3 .prev-label {
3615
    float: left;
3616
    margin-left: 3px;
3617
    margin-top: -2px;
3618
}
3619

    
3620
.single .column3 .prev-arrow {
3621
    background: url("../images/left-arrow.png") no-repeat scroll 3px 2px transparent;
3622
    float: left;
3623
    height: 18px;
3624
    width: 10px;
3625
}
3626

    
3627
.single .column3 .separator {
3628
    width: 135px;
3629
    height: 1px;
3630
    background-color: #84B7D0;
3631
    margin: 0 0 0 7px;
3632
    clear: both;
3633
}
3634

    
3635
.single .column3 .servers {
3636
    font-size: 80%;
3637
    line-height: 15px;
3638
    padding-top: 10px;
3639
    text-align: right;
3640
    overflow: visible;
3641
    position: relative;
3642
}
3643

    
3644
.single .column3 .server-name {
3645
    margin-left: 10px;
3646
    padding-right: 5px;
3647
    cursor: pointer;
3648
    padding-bottom: 2px;
3649
}
3650
div.single div.column3 div.server-name:hover {
3651
    background-color: #5CA1C0;
3652
}
3653
.single .column3 .column3-selected {
3654
    background-color: #84B7D0;
3655
    color: white;
3656
    opacity: 0.8;
3657
    padding-left: 9px;
3658
    width: 160px;
3659
    filter: alpha(opacity = 80);
3660
    position: relative;
3661
    width: 126px;
3662
}
3663

    
3664
.single .toggler {
3665
    color: #FFFFFF;
3666
    float: right;
3667
    font-size: 140%;
3668
}
3669

    
3670
.single .cpu-usage, .single .network-usage {
3671
    text-align: center;
3672
    padding-top: 15px;
3673
    margin-bottom: 5px;
3674
    font-size: 90%;
3675
    font-weight: bold;
3676
}
3677

    
3678
.single .cpu-graph, .single .network-graph {
3679
    margin-left: 20px;
3680
    margin-bottom:30px;
3681
    width: 660px;
3682
}
3683

    
3684
.single div.lower .stats-select .stats-select-option.selected {
3685
    background-color: #4085A5;
3686
    color: #fff;
3687
}
3688

    
3689
.single div.lower .stats-select .stats-select-option {
3690
    cursor: pointer;
3691
    background-color: #DDF1FB;
3692
    color: #4085A5;
3693
    display: block;
3694
    float: left;
3695
    padding: 7px 10px;
3696
    font-size: 0.7em;
3697
}
3698

    
3699
.single div.lower img.stats {
3700
    margin-left: 82px;
3701
}
3702

    
3703
.single div.lower img.stats {
3704
    display: none;
3705
}
3706

    
3707
.single .single-image {
3708
    width: 126px;
3709
    height: 136px;
3710
    margin-bottom: 10px;
3711
    margin-left: 4px;
3712
    background-image: url("../images/icons/machines/large/unknown-sprite.png");
3713
    background-repeat: no-repeat;
3714
    cursor: pointer;
3715
}
3716

    
3717
.single .single-image-state1 {
3718
    background-position: 0px 0;
3719
}
3720

    
3721
.single .single-image-state3 {
3722
    background-position: -252px 0;
3723
}
3724

    
3725
.single .single-image-state4 {
3726
    background-position: -378px 0;
3727
}
3728

    
3729
.single .single-image-state2 {
3730
    background-position: -126px 0;
3731
}
3732

    
3733
.single .column3 .previous, .single .column3 .next {
3734
    cursor: pointer;
3735
    background-color: #84B7D0;
3736
    color: white;
3737
    font-size: 100%;
3738
    height: 15px;
3739
    padding-top: 2px;
3740
}
3741

    
3742
.single .column3 .disabled {
3743
    opacity: 0.5;
3744
    filter: alpha(opacity = 50);
3745
}
3746

    
3747
.single div.lower {
3748
    clear:both;
3749
    background: #EFF7FA repeat scroll 0 0;
3750
    width: 700px;
3751
    padding-bottom: 15px;
3752
}
3753

    
3754
.single div.upper {
3755
    background: transparent;
3756
    margin-bottom: 10px;
3757
    overflow: visible;
3758
    overflow: hidden;
3759
    width: 700px;
3760
    background: #EFF7FA repeat scroll 0 0;
3761
}
3762

    
3763
/* console css */
3764
.console-header-logo {
3765
    padding-top: 17px;
3766
    margin-left: 30px;
3767
    position: fixed;
3768
}
3769

    
3770
#console-header div.help-text {
3771
    font-size: 75%;
3772
    font-weight:bold;
3773
    color:#FFFFFF;
3774
    float:left;
3775
    position: absolute;
3776
    margin: 45px 0 0 2px;
3777
}
3778

    
3779
div.console-container {
3780
    margin: 0 0em;
3781
    height: auto;
3782
}
3783

    
3784
#wrapper.console {
3785
    width: auto;
3786
}
3787

    
3788
.console-info {
3789
    font-size:80%;
3790
    color: white;
3791
    float:left;
3792
    position:relative;
3793
    margin: 15px 0 0 480px;
3794
}
3795

    
3796
applet {
3797
    width:100%;
3798
    height:100%;
3799
}
3800

    
3801
div.console-footer {
3802
    /* this is for version 0.5*/
3803
    display: none;
3804
}
3805

    
3806
.console-footer #footer-text{
3807
    float:left;
3808
    left: auto;
3809
    margin-left:30px;
3810
}
3811

    
3812
/* add network wizard (see also #wizard for shared classes) */
3813
#networks-wizard .header {
3814
    background-color: #4085A5;
3815
    height: 56px;
3816
}
3817

    
3818
#networks-wizard div.name-input {
3819
    margin: 75px 0 0 55px;
3820
}
3821

    
3822
#networks-wizard input {
3823
    border: 1px solid #CCCCCC;
3824
    color: #445566;
3825
    letter-spacing: 1px;
3826
    width: 170px;
3827
}
3828

    
3829
#networks-wizard span.help {
3830
    font-style: italic;
3831
    font-size: 80%;
3832
    margin-left: 10px;
3833
}
3834

    
3835
#networks-wizard .separator-end {
3836
    background-color: #387693;
3837
    height: 6px;
3838
    width: 479px;
3839
    margin-left: -13px;
3840
    margin-top: 19px;
3841
}
3842

    
3843
.red {
3844
    color: red;
3845
}
3846

    
3847
/* add server to network wizard (see also #metadata-wizard for shared classes) */
3848
#add-machines-wizard span.machine-name {
3849
    margin-left: 4px;
3850
    vertical-align: text-top;
3851
}
3852

    
3853
#add-machines-wizard img.list-logo {
3854
    margin: 2px 1px 1px;
3855
}
3856

    
3857
.css-panes {
3858
    clear: both;
3859
    position: relative;
3860
    z-index: 10;
3861
}
3862

    
3863
.last .firewall-content {
3864
}
3865

    
3866
#pub .last .network-separator {
3867
    display:none;
3868
}
3869

    
3870
.public-networks .empty-network-slot {
3871
    display: none;
3872
}
3873

    
3874
.clearfix {
3875
    display: block;
3876
    width: auto;
3877
    zoom: 1;
3878
}
3879

    
3880
/* float clearing for all browsers except the devil one */
3881
.clearfix:after{
3882
  clear: both;
3883
  content: ".";
3884
  display: block;
3885
  height: 0;
3886
  visibility: hidden;
3887
  font-size: 0;
3888
}
3889

    
3890
* html .clearfix {
3891
    display: inline-block;
3892
}
3893

    
3894
.icon .cont-toggler {
3895
    margin-top: -1px;
3896
}
3897

    
3898
.icon .wave {
3899
    margin-right: 4px !important;
3900
    margin-top: 15px !important;
3901
}
3902

    
3903
.icon .status {
3904
    margin-right: 3px;
3905
}
3906

    
3907
#machinesview .status, .single .state {
3908
    font-size: 75%;
3909
}
3910

    
3911
#machinesview-list div.action-indicator {
3912
    margin:0 !important;
3913
    float: none !important;
3914
}
3915

    
3916
.icon div.action-indicator {
3917
    margin-top: 14px;
3918
    margin-right: 4px;
3919
}
3920

    
3921
div.action-indicator {
3922
    width: 15px;
3923
    height: 20px;
3924
    background-repeat: no-repeat;
3925
    background-position: 0 0;
3926
}
3927

    
3928
tbody.machines div.action-indicator {
3929
    position: relative;
3930
    top: -2px;
3931
}
3932
div.state .destroy, tbody.machines .destroy {
3933
    background-image: url("../images/icons/actions/medium/destroy.png");
3934
}
3935
div.state .console, tbody.machines .console {
3936
    background-image: url("../images/icons/actions/medium/console.png");
3937
}
3938
div.state .start, tbody.machines .start {
3939
    background-image: url("../images/icons/actions/medium/start.png");
3940
}
3941
div.state .reboot, tbody.machines .reboot {
3942
    background-image: url("../images/icons/actions/medium/reboot.png");
3943
}
3944
div.state .shutdown, tbody.machines .shutdown {
3945
    background-image: url("../images/icons/actions/medium/shutdown.png");
3946
}
3947

    
3948
h3.overlay-inner-title {
3949
    color: #4085A5;
3950
    font-size: 2em;
3951
}
3952

    
3953
#add-name-container {
3954
    margin-bottom: 10px;   
3955
}
3956

    
3957
.remove-field-trigger, .add-field-trigger {
3958
    cursor: pointer;
3959
}
3960

    
3961
.add-field-trigger img {
3962
    vertical-align: middle;
3963
}
3964

    
3965
.machine-now-building {
3966
    padding-right: 15px !important;
3967
    text-align: justify;
3968
}
3969

    
3970
.sub-text {
3971
    padding-top: 15px;
3972
    padding-right: 15px;
3973
    text-align: justify;
3974
    font-style: italic;
3975
    font-size: 0.8em !important;
3976
}
3977

    
3978
#notification-box a {
3979
    color: #4085A5;
3980
}
3981

    
3982
#notification-box .machine-title img {
3983
    vertical-align: middle;
3984
}
3985

    
3986
#notifiaction-box .password-header {
3987
    margin-bottom: 0 !important;
3988
}
3989

    
3990
#notification-box .password-container a {
3991
    color: #fff;
3992
    text-decoration: underline;
3993
}
3994

    
3995
#notification-box .password-container a:hover {
3996
    background-color: #fff;
3997
    color: #4085A5;
3998
}
3999

    
4000
#notification-box .password-container {
4001
    background: #4085A5;
4002
    border: none;
4003
}
4004

    
4005
#notification-box .password-container .password a {
4006
    font-weight: normal !important;
4007
}
4008

    
4009
#notification-box .cmd {
4010
    color: #fff;
4011
    font-family: monospace;
4012
    font-size: 1.6em;
4013
}
4014

    
4015
.machine-container .separator {
4016
    background-color: #B0D1E0;
4017
}
4018

    
4019
#creation-password-overlay div.password-cont {
4020
    margin: 10px auto;
4021
    padding: 10px;
4022
    border: 2px solid #75B54A;
4023
    background-color: #AADE87;
4024
    color: #447821;
4025
    text-align: left;
4026
    padding-left: 5em;
4027
    position: relative;
4028
}
4029

    
4030
#creation-password-overlay {
4031
    position: relative;
4032
}
4033

    
4034
#creation-password-overlay .form-action {
4035
    position: absolute;
4036
    bottom: 15px;
4037
    right: 13px;
4038
    font-size: 0.8em;
4039
}
4040

    
4041
#creation-password-overlay .password-label {
4042
    float: left;
4043
}
4044

    
4045
#creation-password-overlay .password {
4046
    font-size: 1.5em;
4047
    font-weight: bold;
4048
    letter-spacing: 2px;
4049
    font-family: Georgia, Times, serif;
4050
    margin-right: 5em;
4051
    float: right;
4052
    margin-top: -4px;
4053
}
4054

    
4055
.feedback-form .description {
4056
    margin-bottom: 25px;
4057
}
4058

    
4059
.feedback-form label {
4060
    display: block;
4061
    font-weight: bold;
4062
    margin-bottom: 10px;
4063
    font-size: 0.8em;
4064
}
4065

    
4066
.feedback-form .form-actions {
4067
    border-top: none;
4068
}
4069

    
4070
.nospace {
4071
    padding-top: 0 !important;
4072
    padding-bottom: 0 !important;
4073
}
4074

    
4075
.noborder {
4076
    border-top: none !important;
4077
    border-bottom: none !important;
4078
}
4079

    
4080
.overlay .feedback-form .messages.description {
4081
    padding-bottom:0;
4082
    margin-bottom: 0;
4083
}
4084

    
4085
.feedback-form .messages .error-message {
4086
    color: #f00;
4087
}
4088

    
4089
.feedback-form .messages .success-message {
4090
    color: #8AA87F;
4091
}
4092

    
4093
.feedback-form .feedback-message {
4094
    width: 548px;
4095
    height: 200px;
4096
    border: 1px solid #ddd;
4097
    padding: 5px;
4098
}
4099

    
4100
#feedback-form .empty-error-msg {
4101
    display: none;
4102
}
4103

    
4104
#feedback-form .data-text {
4105
    display: none;
4106
}
4107

    
4108
#feedback-form .message {
4109
    display: none;
4110
}
4111

    
4112
#feedback-form label {
4113
    display: block;
4114
    font-size: 0.85em;
4115
    font-weight: bold;
4116
}
4117

    
4118
#feedback-form label.inline {
4119
    display: inline;
4120
    padding-left: 5px;
4121
}
4122

    
4123
#feedback-form p {
4124
    padding: 1em 0;
4125
    color: #444;
4126
    margin-bottom: 10px;
4127
}
4128

    
4129
#feedback-form .description {
4130
    font-style: italic;
4131
    font-size: 0.9em;
4132
    color: #888;
4133
}
4134

    
4135
#feedback-form .feedback-text {
4136
    width: 98%;
4137
    height: 100px;
4138
    margin-top: 10px;
4139
    margin-bottom: 10px;
4140
}
4141

    
4142
#feedback-form .submit-data {
4143
    display: none;
4144
}
4145

    
4146
#feedback-form .submit, #invform .submit {
4147
    background-color: #4085A5;
4148
    color: #fff;
4149
    border: none;
4150
    padding: 5px 16px;
4151
    cursor: pointer;
4152
    font-size: 1em;
4153
    position: relative;
4154
}
4155

    
4156
#feedback .submit {
4157
    float: right;
4158
    right: 10px;
4159
    margin-top: 10px;
4160
}
4161

    
4162

    
4163
#feedback-form .submit:hover, #invform .submit:hover {
4164
    background-color: #549FC3;
4165
}
4166

    
4167
.feedback-intro {
4168
    padding-right: 15px !important;
4169
    text-align: justify;
4170
}
4171

    
4172
.popup-body .message {
4173
    padding: 20px 5px;
4174
    display: none;
4175
}
4176

    
4177
.popup-body .loading {
4178
    color: #fff;
4179
}
4180

    
4181
.popup-body .success {
4182
    color: #1F921A;
4183
}
4184

    
4185
.popup-body .errormsg {
4186
    color: #E32424;
4187
}
4188

    
4189

    
4190
.close-msg-box {
4191
    display: block;
4192
    margin-top: 10px;
4193
    cursor: pointer;
4194
    color: #4085A5;
4195
    text-decoration: underline;
4196
}
4197

    
4198

    
4199
.console .ip-version-label {
4200
    margin: 0 5px;
4201
}
4202

    
4203
.ipv6-text, .ipv4-text {
4204
    font-size: 0.9em;
4205
}
4206

    
4207
.tooltip {
4208
    background-color: #C4DDE9;
4209
    color: #000;
4210
    font-size: 0.7em;
4211
    padding: 0.2em 0.5em;
4212
    border: 1px solid #888;
4213
    z-index: 50000;
4214
}
4215

    
4216
/*404 and 500 pages*/
4217

    
4218
.error_page {
4219
    position: relative;
4220
    top: 40px;
4221
    padding-bottom: 140px !important;
4222
}
4223

    
4224
.error_page h1 {
4225
    font-weight: normal;
4226
}
4227

    
4228
.error_page .msg_header {
4229
    margin: 0px;
4230
    font-size: 10em;
4231
    position: absolute;
4232
    left: -5px;
4233
    top: 0px;
4234
    color: #4085A5;
4235
    font-family: arial, verdana;
4236
}
4237

    
4238
.error_page p.error_desc {
4239
    color: #fff;
4240
    font-size: 0.8em;
4241
}
4242

    
4243
.error_page {
4244
    padding-right: 50px !important;
4245
    padding-left: 100px !important;
4246
}
4247

    
4248
.error_page .error_content {
4249
    padding-left: 150px;
4250
    padding-top: 97px;
4251
}
4252

    
4253
.error_page .error_content .links, .info_content .links {
4254
    margin-top: 10px;
4255
    margin-left: 20px;
4256
}
4257

    
4258
.error_page .http_error .code {
4259
    letter-spacing: -10px;
4260
    font-size: 9em;
4261
}
4262

    
4263
.error_page .http_error .msg {
4264
    letter-spacing: -1px;
4265
    font-size: 2em;
4266
}
4267

    
4268
.error_page .http_error {
4269
    position: absolute;
4270
    right: 0px;
4271
    bottom: 0px;
4272
    color: #75B3D0;
4273
    line-height: 1em;
4274
}
4275

    
4276
.error_page .error_content a, .info_content .links a {
4277
    color: #4085A5;
4278
    font-weight: bold;
4279
    margin-right: 10px;
4280
    font-size: 0.9em;
4281
}
4282

    
4283
.error_body #container, .info_body #container {
4284
    background-position: right 200px;
4285
}
4286

    
4287
.info_page h1 {
4288
    color: #4085A5;
4289
    font-size: 2em;
4290
    font-weight: normal;
4291
}
4292

    
4293
.info_page p {
4294
    color: #ffffff;
4295
    margin: 1em 0;
4296
}
4297

    
4298
.info_body p a, .error_body p a{
4299
    color: #4085A5;
4300
    text-decoration: underline;
4301
}
4302

    
4303
.error_404 .http_error .code {
4304
    letter-spacing: -7px;
4305
}
4306

    
4307
.network-progress-indicator {
4308
    position: relative;
4309
    display: none;
4310
}
4311

    
4312
.network-progress-indicator img {
4313
    position: absolute;
4314
    bottom: 44px;
4315
    left: 340px;
4316
}
4317

    
4318

    
4319
.single .progress-message {
4320
    margin-top: 90px;
4321
    font-size: 0.6em;
4322
    padding: 0 10px;
4323
    text-align: center;
4324
}
4325

    
4326
/*metadata keys/values*/
4327
.items .tag-item  {
4328
    display: block;
4329
}
4330

    
4331
.single .items .tag-item .key {
4332
    width: 60px;
4333
}
4334

    
4335
.running .scrollable, .terminated .scrollable {
4336
    height: 42px;
4337
}
4338

    
4339
.items .tag-item .key {
4340
    margin-right: 5px;
4341
    width: 30px;
4342
    display: block;
4343
    float: left;
4344
    color: #000;
4345
}
4346

    
4347
.items .tag-item .value {
4348
    color: #444;
4349
}
4350

    
4351
#machinesview-list {
4352
    display: none;
4353
}
4354

    
4355
#machinesview-single {
4356
    position: relative;
4357
    display: none;
4358
}
4359

    
4360
#machinesview-icon {
4361
    display: none;
4362
}
4363

    
4364
#machinesview-icon, #machinesview-single, #machinesview-list {
4365
    
4366
}
4367

    
4368
tbody.machines .spinner {
4369
    margin-top: 0!important;
4370
    margin: 0 !important;
4371
    float: none !important;
4372
}
4373

    
4374
.slider .slider-point {
4375
    width: 4px;
4376
    height: 3px;
4377
    margin-left: 1px;
4378
    background-color: transparent;
4379
    display: block;
4380
    position: absolute;
4381
    z-index: 10;
4382
    bottom: 0px;
4383
}
4384

    
4385
.slider .slider-point-light {
4386
    background-color: transparent;
4387
}
4388

    
4389
.slider-point-text {
4390
    font-size: 0.6em;
4391
    position: absolute;
4392
    top: 4px;
4393
    border-top: 5px solid #C5DEE9;
4394
    padding: 3px;
4395
    color: #4085A5;
4396
    display: block;
4397
    min-width: 6px;
4398
    text-align: middle;
4399
}
4400

    
4401
.slider .handle {
4402
    z-index: 50;
4403
}
4404

    
4405
.modal p.desc {
4406
    margin: 5px 0;
4407
    margin-left: 37px;
4408
    font-size: 0.8em;
4409
    color: #888;
4410
}
4411

    
4412
.api_overlay_template {
4413
    display: none;
4414
}
4415

    
4416
.api_content .password-container .password {
4417
    color: #fff;
4418
    font-size: 1.1em;
4419
}
4420

    
4421
#disks-pane {
4422
    margin-top: 58px;
4423
}
4424

    
4425
span.resend-msg {
4426
    display: block;
4427
    margin-bottom: 5px;
4428
}
4429

    
4430
.success-msg {
4431
    background-color: #5CAD54;
4432
    color: #fff;
4433
    padding: 0.4em;
4434
    border: 1px solid #ddd;
4435
}
4436

    
4437
.error-msg {
4438
    background-color: #800000;
4439
    color: #fff;
4440
    padding: 0.4em;
4441
    border: 1px solid #ddd;
4442
}
4443

    
4444
.success-msg em, .error-msg em {
4445
    font-weight: bold;
4446
    font-style: normal;
4447
    font-size: 0.9em;
4448
}
4449

    
4450
.pagination {
4451
            font-size: 80%;
4452
        }
4453
        
4454
.pagination a {
4455
    text-decoration: none;
4456
        border: solid 1px #AAE;
4457
        color: #15B;
4458
}
4459

    
4460
.pagination a, .pagination span {
4461
    display: block;
4462
    float: left;
4463
    padding: 0.3em 0.5em;
4464
    margin-right: 5px;
4465
        margin-bottom: 5px;
4466
        min-width:1em;
4467
        text-align:center;
4468
}
4469

    
4470
.pagination .current {
4471
    background: #4085A5;
4472
    color: #fff;
4473
        border: solid 1px #AAE;
4474
}
4475

    
4476
.pagination .current.prev, .pagination .current.next{
4477
        color:#999;
4478
        border-color:#999;
4479
        background:#fff;
4480
}
4481

    
4482
table.list-machines .wave {
4483
    float: none !important;
4484
    margin: 0 !important;
4485
}
4486

    
4487
.overlay {
4488
    display: none;
4489
}
4490

    
4491
.overlay .copy-content .clip-copy  {
4492
    right: 10px;
4493
    top:8px;
4494
    border: 1px solid #fff;
4495
}
4496

    
4497
.overlay .copy-content {
4498
    background-color: #387693;
4499
    color: #fff;
4500
    padding: 10px;
4501
    font-size: 1.2em;
4502
    text-align: center;
4503
    position: relative;
4504
}
4505

    
4506
.overlay {
4507
    background-color: #fff;
4508
    border: 2px solid #444;
4509
    text-align: left;
4510

    
4511
    -moz-box-shadow: 0 0 90px 5px #000;
4512
    -webkit-box-shadow: 0 0 90px 5px #000;
4513
    box-shadow: 0 0 90px 5px #000;
4514
    width: 600px;
4515
}
4516

    
4517
.overlay a {
4518
    color: #387693;
4519
}
4520

    
4521
.overlay .overlay-content .description.subinfo {
4522
    margin-bottom:0;
4523
    border-bottom: none;
4524
    padding-bottom:0;
4525
    margin-top: 10px;
4526
    padding-top:10px;
4527
    border-top: 1px solid #64a6c4;
4528
    /*border-top: 1px solid #DBE6EB;*/
4529
    font-size: 0.8em;
4530
}
4531

    
4532
.overlay .overlay-content .important {
4533
    color: #800000;
4534
}
4535

    
4536
.overlay .overlay-content .description {
4537
    color: #444;
4538
    border-bottom: 1px solid #64a6c4;
4539
    margin-bottom: 10px;
4540
    padding-bottom: 10px;
4541
    font-size: 0.9em;
4542
    line-height: 1.6em;
4543
}
4544
.overlay .overlay-content .empty-message {
4545
    margin-bottom: 5px;
4546
}
4547

    
4548
.overlay h3.overlay-header {
4549
    font-size: 0.9em;
4550
    text-align: left;
4551
    padding: 0.8em;
4552
    padding-left: 1em;
4553
    font-weight: normal;
4554
    border-bottom: 1px solid #ddd;
4555
}
4556

    
4557
.overlay h3.overlay-header .title {
4558
    float: left;
4559
}
4560

    
4561
.overlay .container {
4562
    position: relative;
4563
    padding-top: 1em;
4564
    padding: 0.5em;
4565
    background-image: url("../images/popup-bg.png");
4566
    background-repeat: repeat-x;
4567
}
4568

    
4569
.overlay .content {
4570
    background-color: transparent;
4571
    background-image: url("../images/popup-inner-bg.png");
4572
    padding: 1em;
4573
    font-size: 0.8em;
4574
    background-repeat: repeat-x;
4575
    -moz-box-shadow: 0 0 1px 1px #888;
4576
    -webkit-box-shadow: 0 0 1px 1px #888;
4577
    box-shadow: 0 0 1px 1px #888;
4578
}
4579

    
4580
.overlay .message {
4581
}
4582

    
4583
.overlay .actions {
4584
    position: absolute;
4585
    right: 0.75em;
4586
    top: 0.6em;
4587
}
4588

    
4589
.overlay .actions span {
4590
    font-size: 0.8em;
4591
    color: #fff;
4592
    cursor: pointer;
4593
    margin-left: 10px;
4594
    display: block;
4595
    float: left;
4596
    background-color: #4085A5;
4597
    padding: 0.2em 0.4em;
4598
}
4599

    
4600
.overlay-error .error-more-details {
4601
    margin-top: 5px;
4602
    max-height: 210px;
4603
    overflow: auto;
4604
}
4605

    
4606
.overlay-error .key.details.expand {
4607
    background-image: url("../images/plus-8.png");
4608
}
4609

    
4610
.overlay-error .key.details {
4611
    background-color: #5189A3;
4612
    cursor: pointer;
4613
    background-image: url("../images/minus-8.png");
4614
    background-repeat: no-repeat;
4615
    background-position: 545px;
4616
}
4617

    
4618
.overlay-error .container {
4619
    padding-top: 1.9em;
4620
}
4621

    
4622
.overlay-error .error-details {
4623
    font-size: 0.8em;
4624
    margin-top: 10px;
4625
}
4626

    
4627
.overlay-error .error-details anonymous {
4628
    display: block;
4629
    margin-top: 10px;
4630
}
4631

    
4632
.overlay-error h3.overlay-header {
4633
    background-color: #800000;
4634
    color: #fff;
4635
}
4636

    
4637
.overlay-error.non-critical h3.overlay-header {
4638
    background-color: #987249;
4639
}
4640

    
4641
.overlay-error span.key {
4642
    font-weight: normal;
4643
    display: block;
4644
    margin-top: 0.5em;
4645
    background-color: #74AEC9;
4646
    color: #fff;
4647
    padding: 0.4em;
4648
    font-size: 0.8em;
4649
    font-weight: bold;
4650
}
4651

    
4652
.overlay-error .indicator {
4653
    background-color: #880000;
4654
    color: #fff;
4655
    padding: 4px;
4656
    display: block;
4657
    float: left;
4658
    border: 1px solid #444;
4659
}
4660

    
4661
.overlay-error .nav-btn:hover {
4662
    
4663
}
4664

    
4665
.overlay-error .nav-btn {
4666
    margin-left: 5px;
4667
    color: #fff;
4668
    display: block;
4669
    float: left;
4670
    padding: 4px;
4671
    background-color: #AAA;
4672
    border: 1px solid #444;
4673
}
4674

    
4675
.overlay-error .error-nav {
4676
    position: absolute;
4677
    right: 0px;
4678
    bottom: -25px;
4679
    font-size: 0.8em;
4680
}
4681

    
4682
.overlay-error span.value, .overlay-error div.value {
4683
    padding: 0.4em;
4684
    display: block;
4685
    margin-bottom: 0.3em;
4686
}
4687

    
4688
.overlay h3 .closeme {
4689
    float: right;
4690
    font-size: 0.7em;
4691
    margin-top: 0.2em;
4692
    cursor: pointer;
4693
}
4694

    
4695
.overlay .overlay-header .subtitle {
4696
    display: block;
4697
    font-size: 0.8em;
4698
    color: #ddd;
4699
}
4700

    
4701
.overlay .overlay-header .subtitle img {
4702
    vertical-align: middle;
4703
    margin-left: 10px;
4704
    margin-bottom: 2px;
4705
}
4706

    
4707
.overlay-info .content {
4708
    background-repeat: no-repeat;
4709
    background-position: 110% 110%;
4710
    background-color: rgba(255,255,255,0.6)
4711
}
4712

    
4713
.overlay-info .overlay-header {
4714
    background-color: #4085A5;
4715
}
4716

    
4717
.overlay-info .overlay-header .title {
4718
    color: #fff;
4719
}
4720

    
4721
.overlay-info .overlay-header .closeme {
4722
    color: #fff;
4723
}
4724

    
4725
#loading-view {
4726
    width: 600px;
4727
    margin: 0 auto;
4728
    padding: 20px 0;
4729
    font-size: 0.8em;
4730
}
4731

    
4732
#loading-view .header span {
4733
    font-weight: bold;
4734
    color: #4085A5;
4735
}
4736

    
4737
#loading-view .info {
4738
    color: #ddd;
4739
}
4740

    
4741
.options-list {
4742
    margin-top: 0.5em;
4743
    font-size: 0.8em;
4744
}
4745

    
4746
.options-list.five li {
4747
    float: left;
4748
    display: block;
4749
    width: 20%;
4750
    margin-bottom: 5px;
4751
}
4752

    
4753
.options-list.five li:nth-child(5n) .options-object-cont {
4754
    margin-right: 0;
4755
}
4756

    
4757
.options-object-cont input {
4758
    border: 1px solid #aaa;
4759
    width: 92px;
4760
    padding: 0;
4761
    margin: 0;
4762
    margin-top:3px;
4763
    padding: 2px;
4764
}
4765

    
4766
.options-list.three li {
4767
    float: left;
4768
    display: block;
4769
    width: 33%;
4770
    margin-bottom: 5px;
4771
}
4772

    
4773
.meta-list .options-list li.options-object.create .options-object-cont {
4774
    background-image: url("../images/option-action-add.png");
4775
    background-repeat: no-repeat;
4776
    background-position: 90px 5px;
4777
}
4778

    
4779
.meta-list .options-list li .options-object-cont .option-action,
4780
.meta-list .options-list li.options-object.create {
4781
    cursor: pointer !important;
4782
}
4783

    
4784
.meta-list .options-list li .options-object-cont {
4785
    cursor: inherit;
4786
}
4787

    
4788
.options-list li .options-object-cont {
4789
    padding: 5px;
4790
    margin-right: 4px;
4791
    border: 1px solid #A6D1E6;
4792
    cursor: pointer;
4793
    min-height: 35px;
4794
    position: relative;
4795
}
4796

    
4797
.options-list.three li:nth-child(3n) .options-object-cont {
4798
    margin-right: 0;
4799
}
4800

    
4801
.options-list li.selected .options-object-cont {
4802
    background-color: #efefef;
4803
    border: 2px solid #4085A5;
4804
    padding: 4px;
4805
}
4806

    
4807
.options-list li.selected .options-object-cont .title {
4808
}
4809

    
4810
.options-list li.options-object .title {
4811
    display: block;
4812
    color: #FF7F2A;
4813
    margin-bottom: 2px;
4814
}
4815

    
4816
.options-list li .option-action {
4817
    display: none;
4818
    position: absolute;
4819
    background-repeat: no-repeat;
4820
}
4821

    
4822
.options-list.five li.editing {
4823
    width: 40%;
4824
}
4825

    
4826
.options-list.five li.editing .value {
4827
    display: none;
4828
}
4829

    
4830
.options-list li .remove {
4831
    background-image: url("../images/option-action-remove.png");
4832
    width:10px;
4833
    height:10px;
4834
    right:5px;
4835
    top: 5px;
4836
}
4837

    
4838
.options-list li .edit {
4839
    background-image: url("../images/option-action-edit.png");
4840
    width:10px;
4841
    height:10px;
4842
    right:5px;
4843
    bottom: 8px;
4844
}
4845

    
4846
.options-list li:hover .option-action  {
4847
    display: block;
4848
}
4849

    
4850
.options-list li.options-object .value {
4851
    color: #4085A5;
4852
    margin-top: 5px;
4853
    display: block;
4854
}
4855

    
4856
.options-list li.selected.options-object .value {
4857
}
4858

    
4859
.options-list li .options-object-cont:hover {
4860
    background-color: #fff;
4861
}
4862

    
4863
.options-list li.selected .options-object-cont:hover {
4864
    background-color: #fff;
4865
}
4866

    
4867
.options-list li img {
4868
    float: left;
4869
    margin:2px;
4870
    margin-right: 10px;
4871
    padding-bottom:10px;
4872
}
4873

    
4874
#network-vms-select-content li.options-object .value {
4875
    margin-top: 10px;
4876
    margin-left: 30px;
4877
}
4878

    
4879
#network-vms-select-content li.options-object:hover .options-object-cont,
4880
#network-vms-select-content li.options-object .options-object-cont {
4881
    background-image: url("../images/option-action-add-dark.png");
4882
    background-repeat: no-repeat;
4883
    background-position: 160px 28px;
4884
}
4885

    
4886
#network-vms-select-content li.selected:hover .options-object-cont,
4887
#network-vms-select-content li.selected .options-object-cont {
4888
    background-image: url("../images/option-action-remove.png") !important;
4889
}
4890

    
4891
#metadata-overlay-content .view .value {
4892
    margin-top: 10px;
4893
}
4894

    
4895
#metadata-overlay-content {
4896
    position: relative;
4897
}
4898

    
4899
.vm-meta .editor .predefined .predefined-meta-key:hover {
4900
    background-color: #4e8eac;
4901
    color: #fff;
4902
}
4903

    
4904
.vm-meta .editor .predefined .predefined-meta-key {
4905
    float: left;
4906
    margin-right: 5px;
4907
    padding: 4px;
4908
    display: block;
4909
    cursor: pointer;
4910
}
4911

    
4912
.vm-meta .editor .predefined {
4913
    background-color: #A6D1E6;
4914
    font-size: 0.9em;
4915
    border-top: 1px solid #ddd;
4916
}
4917

    
4918
.vm-meta .editor input {
4919
}
4920
.vm-meta .editor {
4921
    margin-bottom: 10px;
4922
}
4923

    
4924
.vm-meta .editor .form-actions .form-action {
4925
    min-width: 50px;
4926
}
4927

    
4928
.vm-meta .editor .form-field input.meta-key {
4929
    width: 90px;
4930
}
4931

    
4932
.vm-meta .form-field {
4933
    float: left;
4934
}
4935

    
4936
.vm-meta .form-actions .form-action {
4937
    float: left;
4938
    margin-right: 10px;
4939
    height: 11px;
4940
}
4941

    
4942
.vm-meta .editor .form-actions .cancel {
4943
    margin-right: 0;
4944
}
4945

    
4946
.vm-meta .editor .form-actions {
4947
    float: right;
4948
    margin:0;
4949
    padding:0;
4950
    margin-left: 15px;
4951
    margin-top: 0px;
4952
}
4953

    
4954
.vm-meta .editor {
4955
    background-color: rgba(64, 133, 165, 0.898) !important;
4956
    background-color: #649DB8;
4957
    font-size:0.9em;
4958
}
4959

    
4960
.vm-meta .meta-key-title {
4961
    font-size: 1.3em;
4962
    color: #fff;
4963
    margin-bottom: 10px;
4964
    display: none;
4965
    float: left;
4966
}
4967

    
4968
.vm-meta .editor-content {
4969
    padding: 10px;
4970
}
4971

    
4972
.vm-meta .inner-mask {
4973
    background-color: #fff;
4974
    opacity:0.6;
4975
    position: absolute;
4976
    top:0;
4977
    left:0;
4978
}
4979

    
4980
.vm-meta .editor label {
4981
    float: left;
4982
    color: #fff;
4983
    margin-right: 2px;
4984
    padding-top:4px;
4985
    font-size: 0.9em;
4986
}
4987

    
4988
.vm-meta .editor input {
4989
    border: none;
4990
    width: 170px;
4991
    margin-left: 10px;
4992
    font-size: 0.9em;
4993
    padding: 4px;
4994
}
4995

    
4996
.vm-meta li.create .options-object-cont {
4997
    background-color: #B3C9AD ;
4998
    border-color: #788774;
4999
}
5000
.vm-meta li.create .options-object-cont .value,
5001
.vm-meta li.create .options-object-cont .title {
5002
    color: #fff;
5003
}
5004

    
5005
#createvm-overlay-content {
5006
    padding: 0;
5007
}
5008

    
5009
.overlay-createvm .container {
5010
    width: 584px !important;
5011
}
5012

    
5013
.create-vm .header-step.current {
5014
    font-weight: bold;
5015
}
5016

    
5017
.create-vm .create-step-cont {
5018
    min-height: 240px;
5019
}
5020
.create-vm .create-controls {
5021
    padding: 10px;
5022
}
5023

    
5024
.create-vm ul li {
5025
    cursor: pointer;
5026
    padding: 4px;
5027
}
5028

    
5029
.create-vm ul li.selected {
5030
    background-color: #aaa;
5031
}
5032

    
5033
.cont-toggler {
5034
    background-image: url("../images/down-arrow.png");
5035
    background-position: right;
5036
    background-repeat: no-repeat;
5037
    background-color: #A1C8DB;
5038
    display: inline-block;
5039
    border-right: 6px solid #A1C8DB;
5040
    padding:2px;
5041
    padding-right: 14px;
5042
    padding-left:0;
5043
    cursor: pointer;
5044
    color: #fff;
5045
    font-size: 0.9em;
5046
}
5047

    
5048
.cont-toggler .label {
5049
    background-color: #98BDCF;
5050
    padding: 2px;
5051
    padding-left: 5px;
5052
    padding-right: 5px;
5053
}
5054

    
5055
.cont-toggler.open {
5056
    background-color: #98BDCF;
5057
    border-color: #98BDCF;
5058
    background-image: url("../images/up-arrow.png");
5059
}
5060

    
5061
.cont-toggler.open .label {
5062
    background-color: #4085A5;
5063
}
5064

    
5065
.overlay .form label {
5066
    font-color: #444;
5067
    margin-right: 10px;
5068
}
5069

    
5070
.form-field.error label {
5071
    color: #ff0000;
5072
    text-decoration: underline;
5073
}
5074

    
5075
.form-field input {
5076
    border: 1px solid #aaa;
5077
    width: 200px;
5078
    padding: 3px;
5079
}
5080

    
5081
.form-actions {
5082
    margin-top: 5px;
5083
    padding-top:5px;
5084
    border-top: 1px solid #64a6c4;
5085
    font-size: 0.8em;
5086
}
5087

    
5088
.form-actions.plain {
5089
    margin-top: 0px;
5090
    padding-top:0px;
5091
    border-top: 0px;
5092
}
5093

    
5094
.form-action {
5095
    float: right;
5096
    min-width: 140px;
5097
    background-color: #FF7F2A;
5098
    border: 1px solid #FF7F2A;
5099
    text-align: center;
5100
    color: #FFFFFF;
5101
    cursor: pointer;
5102
    padding: 4px;
5103
}
5104

    
5105
.form-action:hover {
5106
    background-color: #FF9955;
5107
    color: #FFF;
5108
}
5109

    
5110
.form-action.prev,
5111
.form-action.cancel {
5112
    background-color: #800;
5113
    border: 1px solid #800;
5114
    float: left;
5115
}
5116

    
5117
.form-action.prev:hover,
5118
.form-action.cancel:hover {
5119
    background-color: #CC0000;
5120
    color: #fff;
5121
}
5122

    
5123
.form-action.next,
5124
.form-action.ok {
5125
    background-color: #080;
5126
    border: 1px solid #080;
5127
}
5128

    
5129
.form-action.next:hover,
5130
.form-action.ok:hover {
5131
    background-color: #00aa00;
5132
    color: #fff;
5133
}
5134

    
5135
.form-action .create,
5136
.form-action .submit {
5137

    
5138
}
5139

    
5140
.form-action.in-progress, button.in-progress {
5141
    background-image: url("../images/icons/indicators/medium/horizontal-progress.gif");
5142
    background-repeat: no-repeat;
5143
    background-position: center center;
5144
    color: transparent;
5145
}
5146

    
5147
#createvm-overlay-content {
5148
    padding: 0;
5149
}
5150

    
5151
.create-vm .image-details.selected .size {
5152

    
5153
}
5154

    
5155
.create-vm .image-details .show-details:hover {
5156
    color: #aaa !important; 
5157
}
5158
.create-vm .image-details.selected .show-details:hover {
5159
    color: #fff !important; 
5160
}
5161

    
5162
.create-vm .image-details.selected .show-details,
5163
.create-vm .image-details.selected .size {
5164
    color: #eee;
5165
}
5166

    
5167
.create-vm .image-details.selected span.owner {
5168
    color: #fff;
5169
}
5170

    
5171

    
5172
.create-vm .image-details p {
5173
    font-size: 0.8em;
5174
    padding-left: 27px;
5175
    display:block;
5176
}
5177

    
5178
.create-vm .image-details span.owner {
5179
    display: block;
5180
    font-size: 0.9em;
5181
    float: right;
5182
    color: #FF7F2A;
5183
    position: absolute;
5184
    top: 5px;
5185
    right: 5px;
5186
}
5187

    
5188
.create-vm .select-image .show-details {
5189
    display: none;
5190
    font-size: 0.8em;
5191
    text-decoration: underline;
5192
    color: #000;
5193
    position: absolute;
5194
    bottom: 5px;
5195
    right: 5px;
5196
}
5197

    
5198
.create-vm .image-details .size {
5199
    margin-top: 2px;
5200
    font-size: 0.8em;
5201
    color: #aaa;
5202
    margin-left: 10px;
5203
}
5204

    
5205
.create-vm .step-cont {
5206
    margin: 15px;
5207
}
5208

    
5209
.create-vm .create-step-cont {
5210
    min-height: 250px;
5211
    float: left;
5212
    width: 584px;
5213
}
5214

    
5215
.create-vm .create-controls {
5216
    padding: 10px;
5217
    border-top: 1px solid #ddd;
5218
}
5219

    
5220
.create-vm .empty {
5221
    font-size: 0.8em;
5222
    color: #444;
5223
}
5224

    
5225
.create-vm h4 {
5226
    color: #5CA1C0;
5227
    margin-bottom: 0.5em;
5228
    font-family: arial;
5229
}
5230
.create-vm ul li {
5231
    cursor: pointer;
5232
    padding: 4px;
5233
    font-size: 0.9em;
5234
}
5235

    
5236
.create-vm .create-step-cont li.ssh-key-option.selected,
5237
.create-vm ul li.selected {
5238
    background-color: #FF7F2A;
5239
    background-image:linear-gradient(top, #FF9955, #E88B4D);
5240
    background-image:-webkit-linear-gradient(top, #FF9955, #E88B4D);
5241
    background-image:-o-linear-gradient(top, #FF9955, #E88B4D);
5242
    background-image:-moz-linear-gradient(top, #FF9955, #E88B4D);
5243
    color: #fff;
5244
}
5245

    
5246
.create-vm .images-list-cont.loading .loading-indicator {
5247
    display: block !important;
5248
}
5249

    
5250
.create-vm .images-list-cont .loading-indicator {
5251
    display: none;
5252
    position: absolute;
5253
    right: -13px;
5254
    top: 2px;
5255
    width: 30px;
5256
    height: 10px;
5257
    background-repeat: no-repeat;
5258
    background-image: url("../images/icons/indicators/medium/progress.gif");
5259
}
5260

    
5261
.create-vm .images-list-cont h4 {
5262
    position: relative;
5263
}
5264

    
5265
.create-vm .images-list-cont {
5266
    width: 40%;
5267
    float: left;
5268
    padding-left: 3%;
5269
    padding-right: 3%;
5270
}
5271

    
5272
.create-vm li p.desc {
5273
    font-size: 0.9em;
5274
}
5275

    
5276
.create-vm p.desc.warning {
5277
    color: #880000;
5278
}
5279

    
5280
.create-vm p.desc.empty {
5281
    color: #000;
5282
}
5283

    
5284
.create-vm p.desc {
5285
    font-size: 0.8em;
5286
    color: #888;
5287
    margin-bottom: 10px;
5288
}
5289

    
5290
.create-vm li.role .values .val:hover {
5291
    background-color: #eee;
5292
}
5293
.create-vm li.role .values .val.selected,  .create-vm li.role .values .val.selected:hover {
5294
    color: #fff;
5295
    background-color: #FF9955;
5296
}
5297

    
5298
.create-vm .images-filter-cont, .create-vm .flavors-predefined-cont {
5299
    width: 18%;
5300
    padding-right: 4%;
5301
    float:left;
5302
    border-right: 1px solid #A1C8DB;
5303
    overflow: auto;
5304
}
5305

    
5306
.create-vm .flavor-options-cont {
5307
    width: 74%;
5308
    float: left;
5309
    margin-left: 20px;
5310
}
5311

    
5312
.create-vm .flavor-options-cont .flavor-options li:hover {
5313
    background-image:-webkit-linear-gradient(top, #E8F4FA, #D1E7F0);
5314
    background-image:-o-linear-gradient(top, #E8F4FA, #D1E7F0);
5315
    background-image:-moz-linear-gradient(top, #E8F4FA, #D1E7F0);
5316
    background-image:linear-gradient(top, #E8F4FA, #D1E7F0);
5317
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E8F4FA', endColorstr='#D1E7F0', GradientType=0);
5318
}
5319

    
5320
.create-vm .flavor-options-cont .flavor-options li.disabled * {
5321
    color: #eee !important;
5322
}
5323

    
5324
.create-vm .flavor-options-cont .flavor-options li.disabled {
5325
    background-image:linear-gradient(top, #aaa, #ddd);
5326
    background-image:-webkit-linear-gradient(top, #aaa, #ddd);
5327
    background-image:-o-linear-gradient(top, #aaa, #ddd);
5328
    background-image:-moz-linear-gradient(top, #aaa, #ddd);
5329
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaaaaa', endColorstr='#dddddd', GradientType=0);
5330
}
5331

    
5332
.create-vm .flavor-options-cont .flavor-options li.selected {
5333
    background-color: #FF9955;
5334
    background-image:linear-gradient(top, #FF9955, #E88B4D);
5335
    background-image:-webkit-linear-gradient(top, #FF9955, #E88B4D);
5336
    background-image:-o-linear-gradient(top, #FF9955, #E88B4D);
5337
    background-image:-moz-linear-gradient(top, #FF9955, #E88B4D);
5338
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9955', endColorstr='#E88B4D', GradientType=0);
5339
    border: 1px solid #C97943;
5340
}
5341

    
5342
.create-vm .predefined-list li.disabled {
5343
    color: #ddd !important;
5344
}
5345

    
5346
.create-vm .flavor-options-cont .flavor-options li {
5347
    display: block;
5348
    float: left;
5349
    margin-right: 10px;
5350
    margin-bottom: 9px;
5351
    padding: 9px 14px;
5352
    border: 1px solid #aaa;
5353
    background-image:-webkit-linear-gradient(top, #D1E7F0, #E8F4FA);
5354
    background-image:-o-linear-gradient(top, #D1E7F0, #E8F4FA);
5355
    background-image:-moz-linear-gradient(top, #D1E7F0, #E8F4FA);
5356
    background-image:linear-gradient(top, #D1E7F0, #E8F4FA);
5357
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D1E7F0', endColorstr='#E8F4FA', GradientType=0);
5358
}
5359

    
5360
.create-vm .flavor-options-cont .flavor-options {
5361
    margin-bottom: 2px;
5362
}
5363

    
5364

    
5365
.create-vm .flavor-options .metric {
5366
    font-size: 0.8em;
5367
    margin-left: 2px;
5368
}
5369

    
5370
.create-vm .flavor-options span.title {
5371
    color: #444;
5372
}
5373

    
5374
.create-vm .flavor-options span.desc {
5375
    display: block;
5376
    color: #aaa;
5377
    font-weight: normal;
5378
    font-size: 0.8em;
5379
    float: right;
5380
    margin-top: 4px;
5381
}
5382

    
5383
.disktip {
5384
    padding: 4px;
5385
    top: 20px;
5386
}
5387

    
5388
.create-vm .flavor-options .flavors-disk-template-list {
5389
    position: relative;
5390
}
5391

    
5392
.create-vm .flavor-options .disk_template.option {
5393
    z-index: 10;
5394
    min-width: 50px;
5395
    text-align: center;
5396
}
5397

    
5398
/*0 position is -470px*/
5399
.create-vm .flavor-options .disk-template-description {
5400
    font-size: 0.8em;
5401
    color: #444;
5402
    background-image: url("../images/horizontal-pointer.png");
5403
    background-repeat: repeat-x;
5404
    background-position: -470px 0;
5405
    padding-top: 15px;
5406
    margin-top: -10px;
5407
    font-style: italic;
5408
    display:block;
5409
    overflow: auto;
5410
    padding-bottom: 0px;
5411
    margin-bottom: 7px;
5412
    width: 100%;
5413
}
5414

    
5415
.create-vm .flavor-options .disk_template.option .description {
5416
    display: none;
5417
    position: absolute;
5418
    bottom: -20px;
5419
    left:0;
5420
    color: #888;
5421
    font-style: italic;
5422
    display: block;
5423
    background-color: #fff;
5424
    width: 100%;
5425
    text-align: left;
5426
    z-index: 0;
5427
    border-top: 1px solid #ddd;
5428
    padding-top: 3px;
5429
    display: none;
5430
}
5431

    
5432
.create-vm .flavor-options .selected .value {
5433
    color: #FFF;
5434
}
5435

    
5436
.create-vm .flavor-options .value {
5437
    font-weight: bold;
5438
    color: #5CA1C0;
5439
}
5440

    
5441
.create-vm .flavor-options-cont h4 {
5442
    border-bottom: 1px solid #A1C8DB;
5443
    padding-bottom: 5px;
5444
}
5445

    
5446
.create-vm .images-info-cont {
5447
    width: 28%;
5448
    padding-left: 3%;
5449
    float: left;
5450
    border-left: 1px solid #A1C8DB;
5451
}
5452

    
5453
.create-vm .select-image.wide .show-details {
5454
    display: inline;
5455
}
5456

    
5457
.create-vm .select-image .images-info-cont .hide {
5458
    display: none;
5459
}
5460

    
5461
.create-vm .select-image.wide .images-info-cont .hide {
5462
    display: block;
5463
    float: right;
5464
    position: absolute;
5465
    right: 10px;
5466
    top: 10px;
5467
    font-size: 0.8em;
5468
    text-decoration: underline;
5469
    color: #5CA1C0;
5470
    cursor: pointer;
5471
}
5472

    
5473
.create-vm .select-image.wide .images-list-cont {
5474
    width: 74%;
5475
    padding-right: 0;
5476
}
5477

    
5478
.create-vm .select-image.wide .images-info-cont .description .title {
5479
    display: none;
5480
    float: none;
5481
}
5482

    
5483
.create-vm .select-image.wide .images-info-cont .description p {
5484
    background-color: #fff;
5485
    border: 1px solid #ddd;
5486
    padding: 10px;
5487
    float: none;
5488
}
5489

    
5490
.create-vm .select-image.wide .selected .size {
5491
    color: #FFF !important;
5492
}
5493

    
5494
.create-vm .select-image.wide .image-details .size {
5495
    color: #5CA1C0;
5496
    position: absolute;
5497
    top: 5px;
5498
}
5499

    
5500
.create-vm .select-image.wide .images-info-cont h3 {
5501
    color: #5CA1C0;
5502
    margin: 10px 0;
5503
    margin-top: 5px;
5504
    text-align: left;
5505
    font-size: 0.9em;
5506
}
5507

    
5508
.create-vm .select-image.wide .images-info-cont .description p {
5509
    height: 50px;
5510
}
5511

    
5512
.create-vm .select-image.wide .images-info-cont .description {
5513
    width: 100% !important;
5514
    float: none !important;
5515
    background-color: transparent !important;
5516
    padding: 0 !important;
5517
    font-size: 1.1em;
5518
}
5519
.create-vm .select-image.wide .images-info-cont .extra-details {
5520
    height: 160px;
5521
    overflow-y: scroll;
5522
    padding-right: 15px;
5523
}
5524

    
5525
.create-vm .select-image.wide .images-info-cont .extra-details .image-detail {
5526
    padding: 0px;
5527
    background-color: transparent;
5528
    margin-bottom: 4px;
5529
}
5530

    
5531
.create-vm .select-image.wide .images-info-cont .extra-details .title {
5532
    float: left;
5533
    display: block;
5534
    width: 39%;
5535
    padding: 1%;
5536
    background-color: #5CA1C0;
5537
    color: #fff;
5538
    border: 1px solid #4F8DAA;
5539
    font-size: 0.8em;
5540
}
5541

    
5542
.create-vm .select-image.wide .images-info-cont .extra-details .value {
5543
    float: right;
5544
    display: block;
5545
    width: 55%;
5546
    padding: 1%;
5547
    border: none;
5548
    background-color: #FFF;
5549
    color: #444;
5550
    border: 1px solid #ddd;
5551
    margin-bottom: 0px;
5552
    font-size: 0.8em;
5553
}
5554

    
5555
.create-vm .select-image.wide .images-info-cont .image-detail {
5556
}
5557

    
5558
.create-vm .select-image.wide ul.images-list {
5559
    height: 310px;
5560
    overflow-y: scroll;
5561
    padding-right: 3%;
5562
}
5563

    
5564
.create-vm .select-image.wide .images-info-cont {
5565
    position: absolute;
5566
    width: 88%;
5567
    background-color: #DAE9F0;
5568
    padding: 2%;
5569
    border-left: none;
5570
    height: 320px;
5571
    box-shadow: 0px 0px 2px #aaa;
5572
    -moz-box-shadow: 0px 0px 2px #aaa;
5573
    -webkit-box-shadow: 0px 0px 2px #aaa;
5574
    display: none;
5575
}
5576

    
5577

    
5578
.create-vm .images-info-cont h4, .create-vm .create-step-cont .param h4{
5579
    color: #FF9955;
5580
    margin-bottom: 1em;
5581
    font-size: 1.2em;
5582
}
5583

    
5584
.create-vm .images-info-cont span.title {
5585
    color: #4085A5;
5586
    display: block;
5587
    margin-bottom: 2px;
5588
    font-size: 0.8em;
5589
}
5590

    
5591
.create-vm .type-filter li {
5592
    font-size: 0.8em;
5593
    /*font-weight: bold;*/
5594
    padding: 4px;
5595
    margin-bottom: 0px;
5596
    color: #FF7F2A;
5597
}
5598

    
5599
.create-vm .images-list li {
5600
    min-height: 30px;
5601
}
5602
.create-vm .images-list .image-details:hover {
5603
    background-color: #eee;
5604
}
5605

    
5606
.create-vm .images-list .image-details.selected:hover {
5607
    background-color: #FF7F2A;
5608
}
5609

    
5610
.create-vm .images-list .image-details.selected {
5611
    /*font-weight: bold;*/
5612
}
5613

    
5614
.create-vm .images-list .image-details {
5615
    padding: 6px;
5616
    margin-bottom:1px;
5617
    position: relative;
5618
}
5619

    
5620
.create-vm .images-list .image-details img {
5621
    vertical-align: middle;
5622
    margin-right: 10px;
5623
}
5624

    
5625
.create-vm .images-info-cont .image-detail:last-child p {
5626
    border-bottom: none;
5627
}
5628

    
5629
.create-vm .images-info-cont h4 img {
5630
    vertical-align: middle;
5631
    margin-right: 7px;
5632
    margin-bottom: 5px;
5633
}
5634

    
5635
.create-vm .images-info-cont .description p {
5636
    font-size: 0.8em;
5637
}
5638

    
5639
.create-vm .images-info-cont p {
5640
    margin-bottom: 7px;
5641
    font-size: 0.9em;
5642
    border-bottom: 1px solid #A1C8DB;
5643
    padding-bottom: 7px;
5644
}
5645

    
5646
.create-vm .step-header {
5647
    padding-bottom:0;
5648
    position: relative;
5649
}
5650

    
5651
.create-vm .step-header .header-step .info span.subtitle {
5652
    font-size: 1.2em;
5653
    color: #fff;
5654
    font-weight: bold;
5655
}
5656

    
5657
.create-vm .step-header .header-step .info span {
5658
    float: none;
5659
    text-align: right;
5660
}
5661

    
5662
.create-vm .step-header .header-step .info {
5663
    position: absolute;
5664
    right: 15px;
5665
    top: 20px;
5666
    font-size: 0.8em;
5667
}
5668

    
5669
.create-vm .step-header .header-step span {
5670
    float: left;
5671
    display: block;
5672
}
5673

    
5674
.create-vm .steps-container {
5675
    width: 2000em;
5676
}
5677

    
5678
.create-vm .step-header .header-step .title {
5679
    margin-top: 20px;
5680
    font-size: 1em;
5681
    margin-left: 10px;
5682
}
5683

    
5684
#createvm-overlay-content {
5685
    width: 584px;
5686
    overflow: hidden;
5687
}
5688

    
5689
.create-vm .steps-history .steps-history-cont.current .title {
5690
    display: block;
5691
    top: 23px;
5692
    left: 43px;
5693
    font-size: 1.2em;
5694
    color: #ffffff;
5695
    font-weight: bold;
5696
    font-family: 'Ubuntu', sans-serif !important;
5697
}
5698

    
5699
.create-vm .steps-history .steps-history-cont.current .subnum {
5700
    display: none;
5701
    float: none;
5702
    font-size: 0.9em;
5703
    font-family: 'Ubuntu', sans-serif  !important;
5704
}
5705

    
5706
.create-vm .steps-history .steps-history-cont.current .subtitle,
5707
.create-vm .steps-history .steps-history-cont.current .description {
5708
    font-family: 'Ubuntu', sans-serif  !important;
5709
}
5710

    
5711
.create-vm .steps-history .steps-history-cont.current .info {
5712
    display: block;
5713
    font-family: 'Ubuntu', sans-serif !important;
5714
}
5715

    
5716
.create-vm .steps-history .steps-history-cont.completed .title,
5717
.create-vm .steps-history .steps-history-cont.completed .num {
5718
    color: #A1C8DB;
5719
}
5720

    
5721
.create-vm .steps-history .steps-history-cont.completed {
5722
    background-color: #4085A5;
5723
    color: #fff;
5724
    cursor: pointer;
5725
}
5726

    
5727
.create-vm .steps-history .steps-history-cont.completed .steps-history-step {
5728
    background-image: url("../images/check.png");
5729
}
5730

    
5731
.create-vm .steps-history .steps-history-cont.current .steps-history-step {
5732
    width: 320px;
5733
}
5734

    
5735
.create-vm .steps-history .steps-history-cont.current .num {
5736
    color: #fff;
5737
}
5738

    
5739
.create-vm .steps-history .steps-history-cont.current .info {
5740
    color: #4085A5;
5741
    font-size: 0.8em;
5742
}
5743

    
5744
.create-vm .steps-history .steps-history-cont.current {
5745
    background-color: #A1C8DB;
5746
    color: #fff;
5747
    width: 428px;
5748
}
5749

    
5750
.create-vm .steps-history-step {
5751
    padding: 4px;
5752
    padding-left: 7px;
5753
    font-size: 1em;
5754
    font-family: 'Ubuntu', sans-serif  !important;
5755
    margin-right: 5px;
5756
    padding-top: 12px;
5757
    background-position: right 30px;
5758
    background-image: none;
5759
    background-repeat: no-repeat;
5760
}
5761

    
5762
.create-vm .steps-history {
5763
    background-color: #4085A5;
5764
}
5765

    
5766
.create-vm .steps-history .steps-history-cont.last {
5767
    border-right: none;
5768
}
5769

    
5770
.create-vm .steps-history .steps-history-cont .num {
5771
    margin-left: 5px;
5772
    margin-top: -10px;
5773
    padding-bottom: 10px;
5774
}
5775

    
5776
.create-vm .steps-history .steps-history-cont .title {
5777
    display: none;
5778
    position: absolute;
5779
    bottom: 0px;
5780
    text-align: center;
5781
    padding-bottom: 2px;
5782
    left:0;
5783
    width: 55px;
5784
    margin-left:0;
5785
    margin-top:0;
5786
    font-size: 0.8em;
5787
}
5788

    
5789
.create-vm .steps-history .steps-history-cont .subnum,
5790
.create-vm .steps-history .steps-history-cont .info {
5791
    display: none;
5792
}
5793

    
5794
.create-vm .steps-history .steps-history-cont {
5795
    height: 70px;
5796
    width: 51px;
5797
    float: left;
5798
    color: #fff;
5799
    border-right: 1px solid #A1C8DB;
5800
    color: #A1C8DB;
5801
    background-color: #4085A5;
5802
    background-position: center right;
5803
    background-image: none;
5804
    background-repeat: no-repeat;
5805

    
5806
    -webkit-transition: background-color .15s ease-in;
5807
    -o-transition: background-color .15s ease-in;
5808
    -moz-transition: background-color .15s ease-in;
5809
    transition: background-color .15s ease-in;
5810

    
5811
    border-bottom: 1px solid #aaa;
5812
}
5813

    
5814
.create-vm .step-header .header-step .num {
5815
    color: #225871;
5816
    font-size: 4em;
5817
    margin-bottom: -5px;
5818
    font-family: 'Ubuntu', sans-serif;
5819
    font-weight: normal !important;
5820
}
5821

    
5822
.create-vm .step-header .header-step {
5823
    color: #;
5824
    margin-bottom: -6px;
5825
    width: 25%;
5826
    padding-left: 0%;
5827
    display: block;
5828
    float: left;
5829
}
5830

    
5831
.create-vm .step-header .header-step.current {
5832
    color: #387693;
5833
}
5834

    
5835
.create-vm .image-filters-title {
5836
    margin-top: 1em;
5837
    margin-bottom: 0.5em;
5838
}
5839

    
5840
.create-vm .create-step-cont span.clear {
5841
    font-size: 0.8em;
5842
    font-weight: bold;
5843
    color: #A1C8DB;
5844
    display: block;
5845
}
5846

    
5847
.create-vm .category-filters li {
5848
    float:left;
5849
    display: block;
5850
    padding: 4px;
5851
    background-color: #eee;
5852
    margin-right: 5px;
5853
    font-size: 0.9em;
5854
    margin-bottom: 5px;
5855
}
5856

    
5857
.create-vm .content-cont {
5858
    height: 340px;
5859
    overflow: auto;
5860
}
5861

    
5862
.create-vm .vm-confirm .confirm-params span.cval {
5863
    margin-left: 8px;
5864
    color: #444;
5865
}
5866

    
5867
.create-vm .vm-confirm .confirm-params span.ckey {
5868
    color: #4085A5;
5869
    font-weight: bold;
5870
}
5871

    
5872
.create-vm .vm-confirm .confirm-params {
5873
    margin-bottom: 15px;
5874
}
5875

    
5876
.create-vm .vm-confirm h3.vm-name {
5877
    background-repeat: no-repeat;
5878
    background-position: left center;
5879
    font-size: 1.4em;
5880
    padding-left: 1.45em;
5881
    color: #4085A5;
5882
}
5883

    
5884
.create-vm .images-list-cont h4 a {
5885
    margin-top: 3px;
5886
    margin-right: -2px !important;
5887
}
5888
.create-vm .images-list-cont h4 a,
5889
.create-vm .list-cont h4 a {
5890
    font-size: 0.8em;
5891
    font-weight: normal;
5892
    margin-right: 5px;
5893
    float: right;
5894
    color: #FF7F2A;
5895
}
5896

    
5897
.create-vm .confirm-params {
5898
    overflow: auto;
5899
}
5900

    
5901
.create-vm .vm-confirm .ssh.confirm-params {
5902
    max-height: 150px;
5903
}
5904

    
5905
.create-vm .personalize-cont .confirm-params {
5906
    max-height: 190px;
5907
}
5908

    
5909
.create-vm .personalize-cont,
5910
.create-vm .confirm-cont {
5911
    height: 250px;
5912
}
5913

    
5914
.create-vm .create-step-cont .rename input.rename-field {
5915
    font-size: 1.4em;
5916
    padding: 5px;
5917
    width: 93%;
5918
    padding-left: 30px;
5919
    background-position: 7px center;
5920
    background-repeat: no-repeat;
5921
}
5922

    
5923
.create-vm .create-step-cont .rename label {
5924
    display: block;
5925
}
5926

    
5927
.create-vm .create-step-cont .personalize-conts,
5928
.create-vm .create-step-cont .confirm-conts {
5929
    margin-top: 20px;
5930
}
5931

    
5932
.create-vm .create-step-cont .personalize-cont,
5933
.create-vm .create-step-cont .confirm-cont {
5934
    width: 30%;
5935
    margin-right: 2%;
5936
    border-right: 1px solid #A1C8DB;
5937
    float: left;
5938
}
5939

    
5940
.create-vm .create-step-cont .confirm-cont ul li .title {
5941
    width: 55px;
5942
    float: left;
5943
}
5944

    
5945
.create-vm .create-step-cont .list-cont ul li .value {
5946
    float: right;
5947
    padding-top: 2px;
5948
    display: block;
5949
    width: 90px;
5950
    text-align: right;
5951
}
5952

    
5953
.create-vm .create-step-cont .list-cont ul li.flavor-disktype .value {
5954
    width: 45px;
5955
}
5956

    
5957
.create-vm .create-step-cont .list-cont ul li.image-description .value,
5958
.create-vm .create-step-cont .list-cont ul li.image-name .value {
5959
    float: none;
5960
    width: auto;
5961
    text-align:left;
5962
    width: auto;
5963
}
5964

    
5965
.create-vm .create-step-cont .list-cont ul li {
5966
    padding:0;
5967
    margin:0;
5968
    margin-bottom: 5px;
5969
    border-bottom: 1px solid #EEE;
5970
    padding-bottom: 7px;
5971
    margin-right: 10px;
5972
}
5973

    
5974
.create-vm .create-step-cont li.ssh-key-option .check {
5975
    float: right;
5976
    margin-right: 5px;
5977
    margin-top: 0px;
5978
}
5979

    
5980
.create-vm .create-step-cont li.ssh-key-option.selected {
5981
}
5982
.create-vm .create-step-cont li.ssh-key-option.selected:hover {
5983
    background-color: #F95;
5984
}
5985

    
5986
.create-vm .create-step-cont li.ssh-key-option:hover {
5987
    background-color: #eee;
5988
}
5989

    
5990
.create-vm .create-step-cont li.ssh-key-option.selected {
5991
}
5992

    
5993
.create-vm .create-step-cont li.ssh-key-option {
5994
    padding: 6px !important;
5995
}
5996

    
5997
.create-vm .create-step-cont .list-cont.ssh {
5998
    width: 60%;
5999
}
6000

    
6001
.create-vm .create-step-cont .list-cont.meta h4 {
6002
    margin-right: 0;
6003
}
6004

    
6005
.create-vm .create-step-cont .list-cont.meta {
6006
    margin-right:0;
6007
    border-right: none;
6008
    width: 195px;
6009
}
6010

    
6011
.create-vm .list-cont > h4 {
6012
    font-size: 1.2em;
6013
    margin-right: 10px;
6014
    border-bottom: 1px solid #A1C8DB;
6015
    padding-bottom: 5px;
6016
    color: #387693;
6017
}
6018

    
6019
.create-vm .list-cont .param.image-name {
6020
    margin-bottom: 0 !important;
6021
    border-bottom: none !important;
6022
}
6023

    
6024
.create-vm .list-cont .param h4 {
6025
    margin-bottom: 0px !important;
6026
    font-size: 1.1em !important; 
6027
}
6028

    
6029
.create-vm .list-cont .param {
6030
    margin-bottom: 7px !important;
6031
}
6032

    
6033
.create-vm .list-cont .value {
6034
    font-weight: bold;
6035
}
6036

    
6037
.create-vm .list-cont .param .value {
6038
    font-size: 0.9em;
6039
}
6040

    
6041
.create-vm .list-cont .param .title {
6042
    color: #387693;
6043
}
6044

    
6045
.create-vm .list-cont .image-description {
6046
    margin-left:0;
6047
}
6048

    
6049
.create-vm .list-cont .image-description .value {
6050
    font-weight: normal;
6051
    margin-left: 0 !important;
6052
}
6053

    
6054
.create-vm .list-cont .image-description .title {
6055
    display: none;
6056
    font-size: 0.8em;
6057
}
6058

    
6059
.create-vm .list-cont.meta .values span {
6060
    display:block;
6061
    float: left;
6062
    margin-right: 4px;
6063
    border: 1px solid #eee;
6064
    padding:3px;
6065
    margin-bottom: 4px;
6066
    font-size: 0.9em;
6067
}
6068

    
6069
.create-vm .list-cont.meta .key {
6070
    font-weight: bold;
6071
    font-size: 0.9em;
6072
    display: block;
6073
    margin-bottom: 5px;
6074
}
6075

    
6076
.create-vm .meta input {
6077
    font-size: 0.8em;
6078
}
6079

    
6080
.vm-connect .connect-cont {
6081
    margin-bottom: 20px;
6082
    border-bottom: 1px solid #A1C8DB;
6083
    padding-bottom: 20px;
6084
}
6085

    
6086
.vm-connect .connection-info {
6087
    padding-bottom: 0px;
6088
    margin-bottom: 0;
6089
    border-bottom: none;
6090
}
6091

    
6092
.vm-connect .connection-info .connect a {
6093
    color: #fff;
6094
}
6095

    
6096
.vm-connect .connection-info .connect {
6097
    background-color: #387693;
6098
    color: #fff;
6099
    padding: 10px;
6100
    font-size: 1.2em;
6101
    text-align: center;
6102
}
6103

    
6104
.clip-copy {
6105
    display: block;
6106
    width: 20px;
6107
    height: 20px;
6108
    position: absolute;
6109
    border: 1px solid #387693;
6110
    background-image: url("../images/clipboard.png");
6111
    background-repeat: no-repeat;
6112
    background-position: center;
6113
    cursor: pointer;
6114
    background-color: #A1C8DB;
6115
}
6116

    
6117
.password-cont .clip-copy { right: 10px; top: 8px;}
6118

    
6119

    
6120
.overlay-invitations {
6121
    width: 680px;
6122
}
6123
.invitations-form .sending .sending-msg {
6124
    font-size: 0.8em;
6125
    display: block !important;
6126
    margin-bottom: 5px;
6127
    color: #008800;
6128
}
6129

    
6130
.invitations-form .send-error {
6131
    font-size: 0.8em;
6132
    margin-bottom: 5px;
6133
    margin-top: 5px;
6134
    color: #800;
6135
    padding: 3px;
6136
    padding-left: 0;
6137
    display: none;
6138
}
6139

    
6140
.invitations-form .error label {
6141
    color: #000 !important;
6142
}
6143

    
6144
.invitations-form .form-field {
6145
    width: 49%;
6146
    float: left;
6147
}
6148

    
6149
.invitations-view .left.none {
6150
    background-color: #880000;
6151
}
6152

    
6153
.invitations-form {
6154
    position: relative;
6155
}
6156

    
6157
.invitations-form h3 {
6158
    float: left;
6159
}
6160

    
6161
.invitations-form .add-new-invitation {
6162
    float:left;
6163
    top:2px;
6164
    right: 20px;
6165
    width: 16px;
6166
    height: 16px;
6167
    background-image: url("../images/option-action-add.png");
6168
    background-repeat: no-repeat;
6169
    background-position: center;
6170
    text-indent: -50000em;
6171
    background-color: #4085A5;
6172
    margin-left: 15px;
6173
    cursor: pointer;
6174
}
6175

    
6176
.invitations-view .left {
6177
    font-size: 1em;
6178
    color: #fff;
6179
    font-weight: bold;
6180
    background-color: #4085A5;
6181
    padding: 4px;
6182
}
6183

    
6184
input.has-errors {
6185
    border-color: #ff0000;
6186
}
6187

    
6188
.none-left .invitations-wrapper .invitations-list {
6189
    width: 100% !important;
6190
    border-left: none !important;
6191
    padding-left: 0;
6192
}
6193

    
6194
.invitations-wrapper .invitations-list {
6195
    width: 40%;
6196
    float: left;
6197
    padding-left: 10px;
6198
    border-left: 1px solid #4085A5;
6199
    margin-left: -1px
6200
}
6201

    
6202
.invitations-wrapper .invitations-form {
6203
    width: 57%;
6204
    float: left;
6205
    border-right: 1px solid #4085A5;
6206
}
6207

    
6208
.invitations-wrapper label span {
6209
    color: #aaa;
6210
    font-size: 0.8em;
6211
}
6212

    
6213
.invitations-wrapper label {
6214
    display: block;
6215
    font-size: 0.9em;
6216
    margin-bottom:10px;
6217
    font-weight: bold;
6218
}
6219

    
6220
.invitations-view .add-new-invitation {
6221
    cursor: pointer;
6222
}
6223

    
6224
.invitations-wrapper input.name {
6225
    width: 150px;
6226
}
6227

    
6228
.invitations-wrapper input {
6229
    font-size: 0.9em;
6230
    width: 155px;
6231
    padding:4px;
6232
}
6233

    
6234
.invitations-list .invitation-sent {
6235
    border-bottom: 1px solid #A1C8DB;
6236
    padding-bottom: 5px;
6237
    margin-bottom: 5px;
6238
    position: relative;
6239
}
6240

    
6241
.invitations-view h3 {
6242
    margin-bottom: 10px;
6243
    color: #4085A5;
6244
}
6245

    
6246
.invitations-list .invitation-sent.last,
6247
.invitations-list .invitation-sent:last-child {
6248
    border-bottom: none;
6249
}
6250

    
6251

    
6252
.invitations-list .invitation-sent .email {
6253
    color: #D98147;
6254
    font-size: 0.8em;
6255
    font-weight: bold;
6256
    margin-top: 2px;
6257
}
6258

    
6259
.invitations-list .pagination a,
6260
.invitations-list .pagination span {
6261
    padding: 0.2em 0.3em;
6262
}
6263

    
6264
.invitations-list .pagination {
6265
    font-size: 0.75em;
6266
}
6267

    
6268
.invitations-list .name {
6269
    color: #444;
6270
    font-size: 0.9em;
6271
}
6272

    
6273
.invitations-list .status.sending {
6274
    background-image: url("../images/icons/indicators/small/progress.gif");
6275
}
6276

    
6277
.invitations-list .status.sent {
6278
    background-image: url("../images/invitation_accepted.png");
6279
}
6280

    
6281
.invitations-list .status.resend {
6282
    background-image: url("../images/resend.png");
6283
}
6284

    
6285
.invitations-list .status.resend {
6286
    cursor: pointer;
6287
}
6288

    
6289
.invitations-list .status {
6290
    width: 20px;
6291
    height: 15px;
6292
    position: absolute;
6293
    top:5px;
6294
    right: 2px;
6295
    background-repeat: no-repeat;
6296
    background-position: center;
6297
}
6298

    
6299
.invitations-form .form-entry:last-child {
6300
    border-bottom: none;
6301
}
6302

    
6303
.invitations-form .form-entry {
6304
    position: relative;
6305
    margin-bottom: 10px;
6306
    padding-bottom: 10px;
6307
    border-bottom: 1px solid #ddd;
6308
    margin-right: 10px;
6309
}
6310

    
6311
.invitations-form .send-invitations {
6312
    float: left;
6313
    padding: 5px;
6314
    color: #fff;
6315
    margin-right: 10px;
6316
    margin-top: 10px;
6317
}
6318

    
6319
.invitations-form .form-entry.error {
6320
    padding-bottom: 0px;
6321
}
6322

    
6323
.invitations-form .form-entry.error .remove-invitation {
6324
    bottom: 32px;
6325
}
6326

    
6327
.invitations-form .remove-invitation {
6328
    padding: 5px;
6329
    background-image: url("../images/option-action-remove.png");
6330
    background-position: center;
6331
    background-repeat: no-repeat;
6332
    color: #fff;
6333
    width: 15px;
6334
    height: 15px;
6335
    cursor: pointer;
6336
    text-indent: -50000px;
6337
    position: absolute;
6338
    right: -10px;
6339
    bottom: 14px;
6340
}
6341

    
6342
.invitations-list .resent-info,
6343
.invitations-form .top-info {
6344
    font-size: 0.8em;
6345
    margin-bottom: 10px;
6346
}
6347

    
6348
.invitations-list .msg .email,
6349
.invitations-form .success .msg .email {
6350
    font-weight: bold;
6351
}
6352

    
6353
.invitations-list .msg.err-msg,
6354
.invitations-list .success.msg,
6355
.invitations-form .success .msg {
6356
    background-color: #080;
6357
    color: white;
6358
    padding: 5px;
6359
    margin-right: 10px;
6360
    margin-bottom: 5px;
6361
}
6362
.invitations-list .msg.err-msg,
6363
.invitations-list .success.msg {
6364
    margin-right: 0px;
6365
}
6366
.invitations-list .msg.err-msg {
6367
    background-color: #800;
6368
}
6369

    
6370
.overlay .models-view .previous-view-link {
6371
    margin: -10px;
6372
    margin-bottom:10px;
6373
    padding: 10px 5px;
6374
    background-image: url("../images/left-arrow.png");
6375
    background-repeat: no-repeat;
6376
    background-position: 10px center;
6377
    padding-left: 20px;
6378
    background-color: #93D070;
6379
    cursor: pointer;
6380
    border-bottom: 1px solid #eee;
6381
    text-decoration: underline;
6382
}
6383
.models-view .quick-add {
6384
    text-decoration: underline; 
6385
    color: #4085A5;
6386
    cursor: pointer;
6387
}
6388

    
6389
.empty .items-list {
6390
    margin-top: 0 !important;
6391
}
6392

    
6393
.models-view .items-empty-msg {
6394
    border-top: 1px solid #aaa;
6395
    padding-top: 10px;
6396
    font-size: 1em;
6397
    margin-top:0 !important;
6398
}
6399

    
6400
.models-view .items-empty-msg,
6401
.models-view .model-description {
6402
    color: #444;
6403
    margin: 10px 0;
6404
}
6405

    
6406
.models-view .model-list .collection-action.disabled {
6407
    background-color: #aaa;
6408
    border-color: #aaa;
6409
    cursor: default;
6410
}
6411
.models-view .model-list .collection-action.disabled:hover {
6412
    background-color: #aaa;
6413
    border-color: #aaa;
6414
}
6415

    
6416
.models-view .model-list .collection-action:hover {
6417
    background-color: #aaa;
6418
}
6419

    
6420
.models-view .model-list .collection-action:hover {
6421
    background-color: #F95;
6422
    border-color: #F95;
6423
}
6424

    
6425
.models-view .model-list .collection-action.in-progress {
6426
    background-color: #aaa;
6427
    color: #fff;
6428
    border-color: #aaa;
6429
    background-image: url("../images/icons/indicators/small/progress.gif") !important;
6430
}
6431

    
6432
.models-view .model-list .collection-action.add-generate {
6433
    background-image: url("../images/option-action-generate-ssh.png");
6434
}
6435

    
6436
.models-view .model-list .collection-action.add {
6437
    background-image: url("../images/option-action-add.png");
6438
    padding-right: 20px !important;
6439
}
6440

    
6441
.models-view .model-list .collection-action {
6442
    float: right;
6443
    background-color: #FF7F2A;
6444
    color: #fff;
6445
    padding: 6px 8px;
6446
    margin-left: 10px;
6447
    cursor: pointer;
6448
    padding-right: 30px;
6449
    background-position: right center;
6450
    background-repeat: no-repeat;
6451
    background-clip: border-box;
6452
    border-right: 5px solid #FF7F2A;
6453
}
6454

    
6455
.models-view .items-list {
6456
    margin-top: 10px;
6457
}
6458

    
6459
.models-view .model-list ul li.model-item:last-child {
6460
    margin-bottom: 0;
6461
}
6462

    
6463
.models-view .model-list ul li.model-item {
6464
    background-color: #D4E2E8;
6465
    margin-bottom: 5px;
6466
    position: relative;
6467
}
6468

    
6469
.models-view .model-list ul li.model-item .param {
6470
    float: left;
6471
    padding: 6px;
6472
}
6473

    
6474
.models-view .model-list ul li.model-item .item-action.confirm-remove {
6475
    margin-right: -15px !important;
6476
}
6477

    
6478
.models-view .model-list ul li.model-item .item-action.confirm-remove:hover .cancel {
6479
    color: inherit !important;
6480
}
6481

    
6482
.models-view .model-list ul li.model-item .item-action.confirm-remove:hover {
6483
    background-color: #F95;
6484
    color: inherit !important;
6485
}
6486

    
6487
.models-view .model-list ul li.model-item .item-action.confirm-remove span.cancel {
6488
    padding: 6px !important;
6489
}
6490

    
6491
.models-view .model-list ul li.model-item .item-action.confirm-remove span {
6492
    display: block;
6493
    float: left;
6494
    padding: 6px 15px;
6495
}
6496

    
6497
.models-view .model-list ul li.model-item .item-action .cancel-remove:hover {
6498
    color: #fff !important;
6499
}
6500

    
6501
.models-view .model-list ul li.model-item .item-action.confirm-remove,
6502
.models-view .model-list ul li.model-item .item-action .do-confirm,
6503
.models-view .model-list ul li.model-item .item-action .cancel-remove {
6504
    display:none !important;
6505
    background-color: #D95D0A;
6506
    padding:0;
6507
    margin:0;
6508
}
6509

    
6510
.models-view .model-list ul li.model-item.pending-delete .item-action.remove {
6511
    display: none;
6512
}
6513

    
6514
.models-view .model-list ul li.model-item.pending-delete .item-action .cancel {
6515
    background-color: #F95;
6516
}
6517

    
6518
.models-view .model-list ul li.model-item.pending-delete .item-action.confirm {
6519
    background-color: #FF7F2A;
6520
}
6521

    
6522
.models-view .model-list ul li.model-item.pending-delete .item-action.confirm-remove,
6523
.models-view .model-list ul li.model-item.pending-delete .item-action.confirm-remove .do-confirm,
6524
.models-view .model-list ul li.model-item.pending-delete .item-action .cancel-remove {
6525
    display:block !important;
6526
}
6527

    
6528
.models-view .model-list ul li.model-item.pending-delete .item-action {
6529
    display: block;
6530
}
6531

    
6532
.models-view .model-list ul li.model-item.expanded .item-action,
6533
.models-view .model-list ul li.model-item:hover .item-action {
6534
    display: block;
6535
}
6536

    
6537
.models-view .model-list ul li.model-item .item-action.hide {
6538
    background-image: url("../images/minus-8.png");
6539
}
6540
.models-view .model-list ul li.model-item .item-action.show:hover {
6541
    background-image: url("../images/plus-8.png");
6542
}
6543

    
6544
.models-view .model-list ul li.model-item .item-action.show {
6545
    background-image: url("../images/plus-8-dark.png");
6546
}
6547

    
6548
.models-view .model-list ul li.model-item .item-action.remove {
6549
    background-image: url("../images/option-action-remove.png");
6550
}
6551

    
6552
.models-view .model-list ul li.model-item .item-action.edit:hover {
6553
    background-image: url("../images/option-action-edit-light.png");
6554
}
6555

    
6556
.models-view .model-list ul li.model-item .item-action.edit {
6557
    background-image: url("../images/option-action-edit.png");
6558
}
6559
.models-view .model-list ul li.model-item .item-action.remove:hover {
6560
    background-color: #880000 !important;
6561
    border-color: #800 !important;
6562
}
6563

    
6564
.models-view .model-list ul li.model-item.expanded .item-action.show,
6565
.models-view .model-list ul li.model-item.expanded .item-action.hide,
6566
.models-view .model-list ul li .item-actions .item-action:hover {
6567
    background-color: #4085A5;
6568
    color: #fff;
6569
    border-color: #4085A5;
6570
}
6571

    
6572
.models-view .model-list ul li .item-actions {
6573
    position: absolute;
6574
    right: -10px;
6575
    top: 0px;
6576
}
6577

    
6578
.models-view .model-list ul li .item-actions .item-action {
6579
    float: right;
6580
    padding: 6px;
6581
    margin-right: 10px;
6582
    display: none;
6583
    cursor: pointer;
6584
    padding-right: 20px;
6585
    background-repeat: no-repeat;
6586
    background-position: right center;
6587
    border-right: 5px solid transparent;
6588
}
6589

    
6590
.models-view .model-list h3 {
6591
    float: left;
6592
}
6593

    
6594
.models-view h3 {
6595
    font-size: 1.2em;
6596
    margin-bottom: 1em;
6597
    margin-top: 5px;
6598
    color: #4085A5;
6599
}
6600

    
6601
.models-view .form-actions {
6602
    font-size: 1.1em;
6603
}
6604

    
6605
.models-view .model-list ul li,
6606
.models-view .model-list ul {
6607
    list-style: none;
6608
}
6609

    
6610
.models-view .model-list ul li.header {
6611
    display: none;
6612
}
6613

    
6614
.models-view .model-form textarea {
6615
    width: 99%;
6616
    height: 100px;
6617
    border: 1px solid #aaa;
6618
}
6619

    
6620

    
6621
.models-view .model-form .form-field {
6622
    margin-bottom: 10px;
6623
}
6624

    
6625
.models-view .model-form label {
6626
    display: block;
6627
    color: #406A7D;
6628
    font-size: 1.1em;
6629
    margin: 0px 0 5px 0;
6630
}
6631

    
6632
.models-view .model-form .inline label {
6633
    float: left;
6634
    margin-right: 10px;
6635
    margin-top: 10px !important;
6636
}
6637

    
6638
.models-view .model-form input.long {
6639
    width: 400px;
6640
}
6641

    
6642
.models-view .model-form .inline input {
6643
    width: auto;
6644
    margin-top: 10px;
6645
}
6646

    
6647
.models-view .model-form .inline select {
6648
    width: auto;
6649
    margin-top: 7px;
6650
}
6651

    
6652
.models-view .model-form .inline .errors,
6653
.models-view .model-form .inline .field-desc {
6654
    clear: both;
6655
}
6656

    
6657
#user_public_keys .private-download {
6658
    margin: 5px 0;
6659
    margin-top: 6px;
6660
}
6661

    
6662
#user_public_keys .private-cont form {
6663
    float: left;
6664
    margin-left: 5px;
6665
}
6666

    
6667
#user_public_keys input.form-text:hover {
6668
    background: #F95;
6669
}
6670

    
6671
#user_public_keys input.form-text {
6672
    background: #FF7F2A;
6673
    color: #fff;
6674
    border: 1px solid #F95;
6675
    padding: 0 5px;
6676
    margin: 0 5px;
6677
    margin-top: -1px;
6678
    cursor: pointer;
6679
}
6680

    
6681
#user_public_keys .form-text {
6682
    float: left;
6683
}
6684

    
6685
#user_custom_images,
6686
#user_public_keys {
6687
    font-size: 0.7em;
6688
}
6689

    
6690
#user_public_keys .download-button {
6691
    width: 30px;
6692
    height: 30px;
6693
}
6694

    
6695

    
6696
#user_public_keys #model-item-tpl {
6697
    display: none;
6698
}
6699
#user_public_keys .model-item .name {
6700
    color: #4085A5;
6701
    font-size: 1.2em;
6702
}
6703

    
6704
#user_public_keys .model-item .fingerprint .flabel {
6705
    color: #888;
6706
    float: left;
6707
    margin-right: 5px;
6708
}
6709

    
6710
#user_public_keys .model-item .fingerprint {
6711
    float: none;
6712
    clear: both;
6713
    color: #444;
6714
    font-family: monospace;
6715
    letter-spacing: 1px;
6716
    padding: 4px;
6717
    font-size: 0.9em;
6718
    border-top: 1px solid #fff;
6719
}
6720

    
6721
#user_public_keys .model-item .publicid {
6722
    display: none;
6723
}
6724

    
6725
#user_public_keys .model-item.expanded .publicid .param-content {
6726
    padding: 5px 5px;
6727
    overflow: auto;
6728
    background-color: #FFF;
6729
    border: 1px solid #4085A5;
6730
    border-left: none;
6731
    border-right: none;
6732
    font-size: 1.1em;
6733
}
6734

    
6735
#user_public_keys .model-item.expanded .publicid .param-content textarea {
6736
    width: 100%;
6737
    height: 90px;
6738
    margin:0;
6739
    padding:0;
6740
    border:none;
6741
    overflow: auto;
6742
}
6743

    
6744
#user_public_keys .model-item.expanded .publicid {
6745
    display: block;
6746
    background-color: #fff;
6747
    width: 100%;
6748
    margin-top: 0px;
6749
    margin-left: 0px;
6750
    color: #fff;
6751
    padding:0 !important;
6752
}
6753

    
6754
.models-view .form-messages {
6755
    margin-bottom: 10px;
6756
}
6757

    
6758
.models-view .list-messages {
6759
    margin-top: 10px;
6760
}
6761

    
6762
.models-view .form-messages .error,
6763
.models-view .form-messages .success,
6764
.models-view .list-messages .error,
6765
.models-view .list-messages .success,
6766
#user_public_keys .private-cont {
6767
    background-color: #AADE87;
6768
    color: #447821;
6769
    padding: 5px;
6770
    border: 1px solid #447821;
6771
    font-size: 1.1em;
6772
    margin-top: 5px;
6773
}
6774

    
6775
.models-view .form-messages .error,
6776
.models-view .list-messages .error {
6777
    background-color: #DE8D87;
6778
    color:  #782421 !important;
6779
    border-color: #782421;
6780
}
6781

    
6782
#user_public_keys .limit-msg {
6783
    color: #800;
6784
    position: absolute;
6785
    right: 20px;
6786
    top: 25px;
6787
}
6788

    
6789
#user_public_keys .private-cont {
6790
    margin-top: 10px;
6791
}
6792

    
6793
#user_public_keys .private-cont .private-msg {
6794
    float: left;
6795
    padding:5px;
6796
    margin-top: 5px;
6797
}
6798

    
6799
#user_public_keys .private-cont textarea {
6800
    margin: 5px;
6801
    width: 97%;
6802
    height: 200px;
6803
}
6804

    
6805
#user_public_keys .private-cont .close-private:hover {
6806
    color: #Fff;
6807
}
6808

    
6809
#user_public_keys .private-cont .close-private {
6810
    float: right;
6811
    margin-right: 5px;
6812
    font-weight: bold;
6813
    cursor: pointer;
6814
    text-decoration: underline;
6815
}
6816

    
6817
#user_public_keys .model-item .key-type {
6818
    background-color: #72ADC8;
6819
    color: #fff;
6820
    text-align: center;
6821
    font-size: 0.9em;
6822
    padding:2px 10px;
6823
    margin: 4px 6px;
6824
    margin-top: 7px;
6825
    font-weight: bold;
6826
}
6827

    
6828
#user_public_keys .private-cont .down-button {
6829
}
6830

    
6831
.models-view .form-field .field-desc {
6832
    font-style: italic;
6833
    font-size: 1em;
6834
    color: #888;
6835
}
6836

    
6837
.models-view .form-field.error label {
6838
    font-weight: bold;
6839
    color: #800 !important;
6840
}
6841

    
6842
.models-view .form-field .errors {
6843
    margin: 5px 0;
6844
}
6845

    
6846
.models-view .form-field .errors .error {
6847
    background-color: transparent;
6848
    border: none;
6849
    color: #800;
6850
}