Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (123.3 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
}
25

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
301
#createcontainer a {
302
}
303

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
601
.overlay-networks-create .form-actions {
602
    float: right;
603
    margin-top: -26px !important;
604
}
605

    
606
#wizard #start:hover, #networks-wizard .create:hover {
607
    background-color: #FF9651;
608
    border-color: #FF9651;
609
}
610

    
611
#wizard .separator-end {
612
    position: absolute;
613
    background-color: #387693;
614
    height: 5px;
615
    margin-left: -14px;
616
    margin-top: 382px;
617
    width: 550px;
618
}
619

    
620
.page ul {
621
    height: 270px;
622
    overflow: auto;
623
}
624

    
625
.panes ul.pane {
626
    height: 220px;
627
}
628

    
629
#wizard #tabscontainer {
630
    background-color: #CDE2EC;
631
    height: 20px;
632
    width: 448px;
633
}
634

    
635
.page ul.tabs {
636
    overflow: hidden;
637
    height: auto;
638
    margin-bottom: -1px;
639
    margin-top: -1px;
640
}
641

    
642
.page ul.tabs li {
643
    float: right;
644
    margin: 0 0.2em;
645
}
646

    
647
#status li {
648
    float: left;
649
    color: #387693;
650
    padding: 0 1px 0 37px;
651
    bottom: 0px;
652
}
653

    
654
#status li.active .headernumber {
655
    color: #FFFFFF;
656
}
657

    
658
#status li.active .headerbody {
659
    color: #FFFFFF;
660
}
661

    
662
div.image-container {
663
    border-bottom: 1px solid #CCCCCC;
664
    margin-left: 10px;
665
    margin-right: 10px;
666
}
667

    
668
#page2-container {
669
    background-color: #ECF4F8;
670
    height: 193px;
671
    margin-top: 3px;
672
    padding-top: 25px;
673
}
674

    
675
#page3-container {
676
    background-color: #ECF4F8;
677
    height: 245px;
678
    margin-bottom: 32px;
679
    padding-left: 50px;
680
}
681

    
682
/* slider root element */
683
.slider {
684
    border: 1px solid #666;
685
    cursor: pointer;
686
    display: inline !important;
687
    float: left;
688
    margin: 5px 0 20px 10px;
689
    position: relative;
690
    width: 250px;
691
}
692

    
693
.sliders {
694
    float:left;
695
    width: 40px;
696
    margin-left: 10px;
697
    margin-top: 3px;
698
}
699

    
700
.units {
701
    padding-left:10px;
702
}
703

    
704
.slider-container {
705
    padding-bottom: 15px;
706
    margin-left: 5px;
707
}
708

    
709
/* drag handle */
710
.handle {
711
    -moz-box-shadow: 0 0 2px #000000;
712
    background: url("../images/h30.png") repeat-x scroll 0 0 #FFFFFF;
713
    border: 1px solid #000000;
714
    cursor: move;
715
    display: block;
716
    height: 10px;
717
    margin-top: -8px;
718
    position: absolute;
719
    width: 8px;
720
}
721

    
722
/* progress bar (enabled with progress: true) */
723
.progress {
724
    height: 3px;
725
    background-color: #387693;
726
}
727

    
728
/* the input field */
729
.range {
730
    border: 1px solid #387693;
731
    float: left;
732
    font-size: 100%;
733
    margin: -3px 0 0 15px;
734
    padding: 2px 5px 2px 0;
735
    text-align: right;
736
    width: 50px;
737
}
738

    
739
.selectedrange {
740
    border-color: #5599FF;
741
}
742

    
743
#credits-indicator {
744
    background-color: #ECF4F8;
745
    float: none;
746
    margin: 0 0 0 10px;
747
    border: 1px solid #387693;
748
    color: #387693;
749
}
750

    
751
/* machines */
752
.machine-container {
753
    position:relative;
754
}
755

    
756
.icon .machine-container.last .machine-data-cont, .machine-container:last-child .machine-data-cont {
757
    margin-bottom:0;
758
    padding-bottom: 0;
759
    border-bottom: none;
760
}
761

    
762
.icon .machine-container.last .machine-data, .machine-container:last-child .machine-data {
763
    border-bottom: none;
764
}
765

    
766
.icon .machine-container .subtitle {
767
    font-size: 0.70em;
768
    color: #222;
769
    line-height: 23px;
770
    height: 23px;
771
    margin-top: -5px;
772
}
773

    
774
.icon .machine-container .subtitle {
775
    
776
}
777

    
778
.icon .machine-container .info {
779
    margin-top: 2px;
780
    height: 17px;
781
}
782

    
783
.icon .machine-container .building-progress {
784
    vertical-align: top;
785
}
786

    
787
.ip-version-label {
788
    font-size: 0.8em;
789
    padding: 0.3em;
790
    background-color: #C4DDE9;
791
    color: #000;
792
}
793

    
794
.icon .machine-data {
795
    width: 520px;
796
    float: left;
797
    background-color: transparent;
798
}
799

    
800
.icon .machine-info {
801
    padding: 10px 0;
802
}
803

    
804
.icon .machine-details .name {
805
    height: 24px;
806
}
807

    
808
.icon .machine-connect {
809
    width: 80px;
810
    float: left;
811
}
812

    
813
.icon .machine-details {
814
    width: 310px;
815
    float: left;
816
    margin-top: -5px;
817
}
818

    
819
.icon .state {
820
    font-size: 98%;
821
    width: 120px;
822
    margin-right: 10px;
823
    float: left;
824
    height: 55px;
825
    margin-top: -5px;
826
}
827

    
828
.vm-actions {
829
    position: relative;
830
}
831

    
832
.icon .vm-actions {
833
    /*display: none;*/
834
}
835

    
836
.icon .vm-actions, .network .vm-actions {
837
    width: 180px;
838
    height: 76px;
839
    float: left;
840
}
841

    
842
.network .vm-actions {
843
    width: 185px;
844
}
845

    
846
.icon .machine-container:hover .machine-data {
847
    background-color:#A1C8DB !important;
848
}
849

    
850
.icon .machine-container:hover .vm-actions {
851
    display: block;
852
}
853

    
854
.vm-actions {
855
    font-size: 75%;
856
}
857

    
858
.vm-actions a {
859
    color: black;
860
    height: 15px;
861
    margin: 0 0 1px 4px;
862
    padding: 1px;
863
    padding-left: 8px;
864
    display: block;
865
}
866

    
867
.vm-actions a:hover {
868
    background-color:#A1C8DB;
869
    color: #fff;
870
    border-left: 4px solid #7DB4CD;
871
    padding-left: 4px;
872
}
873

    
874
.vm-actions a.selected {
875
    color: #FF7F2A !important;
876
}
877

    
878
.vm-actions a.selected {
879
    background-color:transparent;
880
}
881

    
882
.vm-actions .action-container {
883
    position: relative;
884
}
885

    
886
.vm-actions .action-container .confirm_single {
887
    position: absolute;
888
    right: -20px;
889
    top: -2px;
890
}
891

    
892
div.list div.actions a.enabled.destroy {
893
}
894

    
895
.vm-actions .action-container.destroy {
896
    position: absolute;
897
    bottom: -1px;
898
    width: 100%;
899
    left: 0px;
900
    background: transparent;
901
}
902

    
903
.vm-actions .action-container.destroy a {
904
}
905

    
906
.icon .light-background .machine-data, div.network.light-background, div.network.expand {
907
    background-color:#aed2e3 !important;
908
}
909

    
910
.single .light-background {
911
    background-color:#aed2e3;
912
}
913

    
914
.icon .machine-data-cont {
915
    margin-bottom: 5px;
916
    padding-bottom: 5px;
917
    border-bottom: 1px solid #D1E7F0;
918
    width: 520px;
919
    float: left;
920
}
921
.icon .terminated .machine-data-cont {
922
    border-color: #B6CED6;
923
}
924

    
925
.machine a {
926
    font-weight: normal;
927
    text-decoration: none;
928
}
929

    
930
.machine span.name, .machine span.ip {
931
    font-size: 75%;
932
    color: black;
933
    margin-top: 6px;
934
}
935

    
936
.machine span.name {
937
    font-weight: bold;
938
}
939

    
940
.oldValue {
941
    display:none;
942
}
943

    
944
.state {
945
}
946

    
947
.state div {
948
    text-align: right;
949
    margin-right: 3px;
950
}
951

    
952
/* icon view actions */
953
div.machine div.actions a.shutdown-padding {
954
    margin-bottom: 22px;
955
}
956

    
957
div.actions a.enabled:hover{
958
    color: black !important;
959
    text-decoration: underline;
960
    display: block;
961
}
962

    
963
div.machine:hover .actions a {
964
    visibility: visible;
965
}
966

    
967
div.machine div.display a{
968
    visibility: visible;
969
}
970

    
971
div.machine div.actions .disabled {
972
    display: none;
973
}
974

    
975
div.single-container div.vm-actions .disabled {
976
    display: none;
977
}
978

    
979
div.machine div.actions .disabled {
980
    display: none;
981
}
982

    
983
div.connect-arrow {
984
    background: url("../images/connect-arrow.png") no-repeat;
985
    height: 28px;
986
    width:14px;
987
    position: absolute;
988
    display: none;
989
}
990

    
991
.machine div.connect-arrow {
992
    display: none;
993
    left: -3px;
994
    position: absolute;
995
    top: 9px;
996
}
997

    
998
div.connect-arrow:hover, div.connect-arrow.border-hover, div.connect-arrow-ie, div.connect-arrow.border-ie {
999
    cursor: pointer;
1000
    background: url("../images/connect-arrow-hover.png") no-repeat;
1001
    height: 28px;
1002
    width:26px;
1003
}
1004

    
1005
div.connect-border {
1006
    opacity: 0.8;
1007
    filter: alpha(opacity = 80);
1008
    background-color:#4fe0c3;
1009
    height:28px;
1010
    width: 12px;
1011
    position: absolute;
1012
    display: none;
1013
}
1014

    
1015
div.connect-border:hover {
1016
    cursor: pointer;
1017
}
1018

    
1019
.machine div.connect-border {
1020
    display: none;
1021
    left: -15px;
1022
    position: absolute;
1023
    top: 9px;
1024
}
1025

    
1026
.standard .machine .logo {
1027
    float: left;
1028
    width: 50px;
1029
    height: 54px;
1030
    margin: 1px 14px 0;
1031
}
1032
.machine .logo {
1033
    background-image: url("../images/icons/machines/medium/unknown-sprite.png");
1034
    background-repeat: no-repeat;
1035
    cursor: pointer;
1036
}
1037

    
1038
.standard .machine .single-image-state1 {
1039
    background-position: 0px 0;
1040
}
1041

    
1042
.standard .machine .single-image-state3 {
1043
    background-position: -100px 0;
1044
}
1045

    
1046
.standard .machine .single-image-state4 {
1047
    background-position: -150px 0;
1048
}
1049

    
1050
.standard .machine .single-image-state2 {
1051
    background-position: -50px 0;
1052
}
1053

    
1054
.standard .running .machine .logo {
1055
   cursor: pointer;
1056
}
1057

    
1058
.list .machine img {
1059
    margin: 0;
1060
}
1061

    
1062
.icon div.ip, .icon div.ips {
1063
    font-size: 75%;
1064
}
1065

    
1066
div.indicators {
1067
    margin-right: 2px !important;
1068
}
1069
div.indicator1, div.indicator2, div.indicator3, div.indicator4 {
1070
    background-color: #63cf1c;
1071
    width:10px;
1072
    height:11px;
1073
    clear: none;
1074
    float:right;
1075
    -webkit-transition: background-color .75s ease-out;
1076
    -o-transition: background-color .75s ease-out;
1077
    -moz-transition: background-color .75s ease-out;
1078
    transition: background-color .75s ease-out;
1079
}
1080

    
1081
.view-separator {
1082
    color:#5F8DD3;
1083
}
1084

    
1085
.running.disabled {
1086
    background: transparent;
1087
}
1088

    
1089
.running-state .indicator1, .running-state .indicator2, .running-state .indicator3, .running-state .indicator4 {
1090
    background-color: #63cf1c;
1091
}
1092

    
1093
.rebooting-state .indicator1, .rebooting-state .indicator2, .rebooting-state .indicator3, .rebooting-state .indicator4 {
1094
    background-color: #d4aa00;
1095
}
1096

    
1097
.error-state .indicator1, .error-state .indicator2, .error-state .indicator3, .error-state .indicator4 {
1098
    background-color: #ff0000;
1099
}
1100

    
1101
.terminated-state .indicator1, .terminated-state .indicator2, .terminated-state .indicator3, .terminated-state .indicator4 {
1102
    background-color: #5e1616;
1103
}
1104

    
1105
.build-state .indicator1, .build-state .indicator2, .build-state .indicator3, .build-state .indicator4 {
1106
    background-color: #FF7F2A;
1107
}
1108

    
1109
.destroying-state .indicator1, .destroying-state .indicator3, .destroying-state .indicator2, .destroying-state .indicator4 {
1110
    background-color: #4085a5 !important;
1111
}
1112

    
1113
.shutting-state .indicator1, .shutting-state .indicator3, .shutting-state .indicator2, .shutting-state .indicator4 {
1114
    background-color: #940606;
1115
}
1116

    
1117
.starting-state .indicator1, .starting-state .indicator2, .starting-state .indicator3, .starting-state .indicator4 {
1118
    background-color: #9ed976;
1119
}
1120

    
1121
.network-indicator .indicator1, .network-indicator .indicator2, .network-indicator .indicator3, .network-indicator .indicator4 {
1122
    background-color: #63cf1c;
1123
}
1124

    
1125
.network-indicator.in-progress .indicator1, .network-indicator.in-progress .indicator2, .network-indicator.in-progress .indicator3, .network-indicator.in-progress .indicator4 {
1126
    background-color: #FF7F2A;
1127
}
1128

    
1129
.running, .terminated {
1130
    background: #EFF7FA repeat scroll 0 0;
1131
    padding-bottom: 15px;
1132
}
1133

    
1134
.running, #machinesview-list, .single {
1135
}
1136

    
1137
.terminated {
1138
    background:#DCE5E8  repeat scroll 0 0;
1139
    padding-top: 15px;
1140
    margin-top: 15px;
1141
}
1142

    
1143
span.rename {
1144
    background-repeat: no-repeat;
1145
    color: transparent;
1146
    font-size: 75%;
1147
    font-weight: normal;
1148
    margin-left: 10px;
1149
    padding-left: 10px;
1150
    text-align: left;
1151
    cursor: pointer;
1152
}
1153

    
1154
div.name:hover span.rename, span.rename_hovered {
1155
    color: #3D3D3D;
1156
    margin-top: 0.4em;
1157
    background-image: url("../images/pencil.png");
1158
    background-position: 0 3px;
1159
}
1160

    
1161
.machine div.info {
1162
    font-size: 75%;
1163
}
1164

    
1165
div.machine:hover div.info-header, div.machine:hover div.toggler div.down {
1166
    background-color: #84b7d0;
1167
}
1168

    
1169
div.machine div.info-label.darker, .single div.tags-label.darker, div.network .darker {
1170
    background-color: #5CA1C0;
1171
}
1172

    
1173
.machine div.info div.info-label {
1174
    font-size: 75%;
1175
    height:16px;
1176
    width: 30px;
1177
    padding: 1px 0 0 5px;
1178
}
1179

    
1180
.machine div.info div.toggler, .single div.tags div.toggler, div.network div.toggler {
1181
    width:15px;
1182
    height:17px;
1183
    margin-top: -11px;
1184
    margin-left: 37px;
1185
}
1186

    
1187
div.network div.toggler {
1188
    margin-left: 90px;
1189
}
1190

    
1191
.machine div.info div.down {
1192
    background: url(../images/down-arrow.png) no-repeat scroll 1px 1px;
1193
}
1194

    
1195
.single div.tags div.down {
1196
    background: url(../images/down-arrow.png) no-repeat scroll 2px 2px;
1197
}
1198

    
1199
.network div.network-machines div.down {
1200
    background: url(../images/down-arrow.png) no-repeat scroll 2px 2px;
1201
}
1202

    
1203
.network div.network-machine div.firewall div.down {
1204
    background: url(../images/down-arrow.png) no-repeat scroll 2px 2px;
1205
}
1206

    
1207
.machine div.info div.up {
1208
    background: url(../images/up-arrow.png) no-repeat scroll 1px 0;
1209
}
1210

    
1211
.single div.tags div.up {
1212
    background: url(../images/up-arrow.png) no-repeat scroll 2px 2px;
1213
}
1214

    
1215
.network div.network-machines div.up {
1216
    background: url(../images/up-arrow.png) no-repeat scroll 2px 2px;
1217
}
1218

    
1219
.network div.network-machine div.firewall div.up {
1220
    background: url(../images/up-arrow.png) no-repeat scroll 2px 2px;
1221
}
1222

    
1223
button {
1224
    background-color: #87AADE;
1225
    border: 1px solid #87AADE;
1226
    color: #FFFFFF;
1227
    cursor: pointer;
1228
    height: 23px;
1229
    width: 120px;
1230
}
1231

    
1232
button.next {
1233
    background-color: #4085A5;
1234
    border-color: #4085A5;
1235
    text-align: right;
1236
}
1237

    
1238
button.next:hover {
1239
    background-color: #7DB4CD;
1240
    border-color: #7DB4CD;
1241
}
1242

    
1243
button.prev {
1244
    background-color: #4085A5;
1245
    border-color: #4085A5;
1246
    margin-left: -1px;
1247
    text-align: left;
1248
}
1249

    
1250
button.prev:hover {
1251
    background-color: #7DB4CD;
1252
    border-color: #7DB4CD;
1253
}
1254

    
1255
.image-logo {
1256
    float: left;
1257
    margin-right: 1em;
1258
    margin-left: 1.5em;
1259
    margin-top: 4px;
1260
}
1261

    
1262
.icon div.image {
1263
    clear: both;
1264
    display: block;
1265
    margin-bottom: 3px;
1266
    margin-top: 3px;
1267
    padding: 5px;
1268
}
1269

    
1270
div#view-select {
1271
    clear: both;
1272
    color: white;
1273
    position: absolute;
1274
    right: 15px;
1275
    top: 15px;
1276
}
1277

    
1278
a.machines_view_link {
1279
    text-decoration: none;
1280
    font-size: 0.7em;
1281
    padding: 4px;
1282
    padding-right: 8px;
1283
    color: #5CA1C0;
1284
    margin-left: 5px;
1285
    background-repeat: no-repeat;
1286
    background-color: #C9DFEA;
1287
}
1288

    
1289
a.machines_view_link span {
1290
    float: left;
1291
}
1292

    
1293
a.machines_view_link span.ico {
1294
    width: 17px;
1295
    height: 15px;
1296
    margin-right: 10px;
1297
    background-position: -36px 0;
1298
}
1299

    
1300
a.machines_view_link:hover {
1301
    background-color: #A1C8DB;
1302
    color: #fff;
1303
}
1304
a.machines_view_link:hover span.ico {
1305
    background-position: -0px 0px;   
1306
}
1307

    
1308
a.machines_view_link.activelink span.ico {
1309
    background-position: -18px 0px;
1310
}
1311
a.machines_view_link.activelink {
1312
    color: #fff;
1313
    background-color: #5CA1C0;
1314
}
1315

    
1316
div#view-select a {
1317
    display: block;
1318
    float: left;
1319
}
1320

    
1321
a#list:hover {
1322
    background: #5f8dd3;
1323
}
1324

    
1325
a#machines_view_icon_link:active, a#machines_view_list_link:active {
1326
    color:white;
1327
}
1328

    
1329
a#machines_view_icon_link span.ico {
1330
    background-image: url("../images/icon-view.png");
1331
}
1332

    
1333
a#machines_view_list_link span.ico {
1334
    background-image: url("../images/list-view.png");
1335
}
1336

    
1337
a#machines_view_single_link span.ico {
1338
    background-image: url("../images/single-view.png");
1339
}
1340

    
1341
#machinetype {
1342
    background-color: #CDE2EC;
1343
    height: 25px;
1344
    margin-bottom: 0px !important;
1345
}
1346

    
1347
div.machine-type {
1348
    float: left;
1349
    margin: 4px 18px 20px;
1350
}
1351

    
1352
.machine-type .active {
1353
    color: #FFFFFF
1354
}
1355

    
1356
div.machine-type label.disabled {
1357
    color: #aaa !important;
1358
}
1359

    
1360
#machinesview {
1361
}
1362

    
1363
#machines-pane {
1364
}
1365

    
1366
.list#machinesview {
1367
    margin-left: -20px;
1368
    display:none;
1369
}
1370

    
1371
#machinesview-list.list {
1372
    background: #EFF7FA  repeat scroll 0 0;
1373
    padding-left: 15px;
1374
    padding-bottom: 15px;
1375
}
1376

    
1377
#machinesview_content {
1378
    display:none;
1379
}
1380

    
1381
.list-machines {
1382
    min-width: 515px;
1383
}
1384

    
1385
#emptymachineslist {
1386
    background-color: #6BA9C6;
1387
    color: #A0A0A0;
1388
    display: none;
1389
    padding: 65px 150px 35px;
1390
    text-align: justify;
1391
    margin-top: -70px;
1392
}
1393

    
1394
#welcomeheader {
1395
    color:white;
1396
    text-align: center;
1397
}
1398

    
1399
.welcomebody {
1400
    color: white;
1401
    font-size:80%;
1402
}
1403

    
1404
.welcomebody a {
1405
    color: white;
1406
}
1407

    
1408
.welcomefooter {
1409
    color: white;
1410
    font-size:60%;
1411
}
1412

    
1413
.welcomefooter a {
1414
    color: white;
1415
}
1416

    
1417
.emptycreatecontainer {
1418
    margin-left: 430px !important;
1419
    position: absolute;
1420
    margin-top: 5px !important;
1421
    width: 180px;
1422
    background-color: #CCCCCC;
1423
    padding: 5px;
1424
    padding-left: 10px;
1425
}
1426

    
1427
.emptycreate {
1428
    margin: 20px 10px 5px 0 !important;
1429
}
1430

    
1431
#createbody {
1432
    display:none;
1433
    font-size: 80%;
1434
}
1435

    
1436
div.list label img {
1437
    margin: 5px 5px -3px 0;
1438
}
1439

    
1440
div.list label {
1441
    color: #3D3D3D;
1442
    font-size: 75%;
1443
}
1444

    
1445
div.list .state {
1446
    margin-top: 7px;
1447
    margin-right: 10px;
1448
}
1449

    
1450
div.list table tbody {
1451
    margin-top: 8px;
1452
}
1453

    
1454
div.list table tr.checked td {
1455
    background-color: #A1C8DB !important;
1456
}
1457

    
1458
div.list table tr:hover td,
1459
div.list table tr.inactive:hover td,
1460
div.list table tr.error:hover td {
1461
    background-color: #A1C8DB;
1462
    color: #fff;
1463
}
1464

    
1465
div.list table td.name {
1466
    min-width: 170px;
1467
}
1468

    
1469
div.list table td.status {
1470
    font-size: 0.9em !important; 
1471
    text-align: right;
1472
    min-width: 90px;
1473
    color: #000;
1474
}
1475

    
1476
div.list table td.flavor {
1477
    font-size: 0.8em;
1478
}
1479

    
1480
div.list table td {
1481
    border-bottom: 1px solid #DDD;
1482
}
1483

    
1484
div.list table tr.error td.status {
1485
    color: #800000 !important;
1486
    font-weight: bold;
1487
}
1488

    
1489
div.list table tr.error td {
1490
    background-color: #DCE5E8;
1491
}
1492

    
1493
div.list table tr.inactive td {
1494
    background-color: #DCE5E8;
1495
}
1496

    
1497
div.list .stopped {
1498
    margin-top: 8px;
1499
}
1500

    
1501
/* root element for tabs  */
1502
#wizard ul.tabs {
1503
    margin-right: -1px;
1504
    float: right;
1505
}
1506

    
1507
#wizard div.panes {
1508
    height: 247px;
1509
    clear:both;
1510
    margin-top: 3px;
1511
}
1512

    
1513
.typebody {
1514
    font-size: 80%;
1515
    font-weight: normal;
1516
    position: relative;
1517
    top: -3px;
1518
}
1519

    
1520
.typehover {
1521
    color: #FFFFFF;
1522
}
1523

    
1524
#label-name {
1525
    margin-top: 10px;
1526
}
1527

    
1528
/* single tab */
1529
#wizard ul.tabs li {
1530
    margin-bottom: 0;
1531
    list-style-type:none;
1532
    float: left;
1533
}
1534

    
1535
/* link inside the tab. uses a background image */
1536
#wizard ul.tabs a {
1537
    display:block;
1538
    padding: 0.2em 0.5em 0.1em 0.4em;
1539
    text-decoration:none;
1540
    color: #FFFFFF;
1541
    position:relative;
1542
    top:1px;
1543
    outline:0;
1544
    background-color: transparent;
1545
    text-align: center;
1546
    width: 100px;
1547
    white-space: nowrap;
1548
    height: 17px;
1549
}
1550

    
1551
#wizard ul.tabs a:hover {
1552
    color: #FFFFFF;
1553
    background-color:#4085A5;
1554
}
1555

    
1556
/* selected tab */
1557
#wizard ul.tabs a.current {
1558
    color: white;
1559
    background-color: #7DB4CD;
1560
    cursor: default;
1561
}
1562

    
1563
#wizard #standard-images {
1564
    background-color: #ECF4F8;
1565
}
1566

    
1567
div.list div.actions {
1568
    display: none;
1569
    clear: left;
1570
    float: right;
1571
    margin-right: 15px;
1572
    margin-top: 37px;
1573
    text-align: right;
1574
    width: 120px;
1575
}
1576

    
1577
div.list div.actions a {
1578
    clear: left;
1579
    color: #A1A1A1;
1580
    display: block;
1581
    font-size:75%;
1582
    margin-bottom: 2px;
1583
}
1584

    
1585
div.list div.actions a:hover {
1586
    background-color: transparent;
1587
}
1588

    
1589
div.list div.actions a.enabled {
1590
    color: #3D3D3D;
1591
}
1592

    
1593
div.list div.actions a.enabled:hover{
1594
    cursor: pointer;
1595
    color: black;
1596
    text-decoration: underline;
1597
}
1598

    
1599
div.list div.actions a.selected {
1600
    color: #FF7F2A !important;
1601
}
1602

    
1603
input.machine {
1604
    width: 13px;
1605
    height: 13px;
1606
    top: -1px;
1607
    overflow: hidden;
1608
}
1609

    
1610
.description-container {
1611
    display: inline-block;
1612
    position: relative;
1613
    width: 300px;
1614
}
1615

    
1616
#wizard .button-container {
1617
    height: 20px;
1618
}
1619

    
1620

    
1621
/* metadata dropdown combo */
1622
.meta-key {
1623
    margin-right: 18px;
1624
    float:left;
1625
}
1626

    
1627
/* notification box */
1628
#yes-no {
1629
    height: 150px;
1630
    z-index: 9999;
1631
    border-bottom: 5px solid #4085A5;
1632
}
1633

    
1634
#yes-no p, #yes-no button {
1635
    margin-top: 15px;
1636
}
1637

    
1638
#error-success, .notification-box {
1639
    z-index: 9999;
1640
    border-bottom: 5px solid #4085A5;
1641
    min-height: 150px;
1642
    top: 50px !important;
1643
    position: absolute;
1644
}
1645

    
1646
#error-success p, .notification-box p {
1647
    margin-top: 5px;
1648
}
1649

    
1650
.error-report {
1651
    display: none;
1652
}
1653

    
1654
#error-success .error-report {
1655
    position: absolute;
1656
    top: 140px;
1657
    right: 40px;
1658
}
1659

    
1660
.error .error-report {
1661
    display: block;
1662
}
1663

    
1664
#error-success .error-report .errormsg {
1665
    display: none;
1666
}
1667

    
1668
#error-success .error-report .success {
1669
    display: none;
1670
}
1671

    
1672
#error-success .error-report .sending {
1673
    display: none;
1674
}
1675

    
1676
#error-success .error-report .send-btn {
1677
    color: #4085A5;
1678
    text-decoration: underline;
1679
    cursor: pointer;
1680
}
1681

    
1682
#error-success strong, .notification-box strong {
1683
    color: #F49C1A;
1684
}
1685

    
1686
#error-success .close, .notification-box .close {
1687
    background-image: url("../images/close-popup.png");
1688
    background-repeat: no-repeat;
1689
    cursor: pointer;
1690
    height: 13px;
1691
    position: absolute;
1692
    right: 7px;
1693
    top: 9px;
1694
    width: 13px;
1695
}
1696

    
1697
.popup-header-error {
1698
    background-color: #800000 !important;
1699
}
1700

    
1701
.popup-border-error {
1702
    border-color: #800000 !important;
1703
    width:auto;
1704
}
1705

    
1706
.popup-details-error {
1707
    border: none !important;
1708
}
1709

    
1710
.popup-separator-error {
1711
    margin-bottom: 5px !important;
1712
}
1713

    
1714
#error-success .popup-header, .notification-box .popup-header {
1715
    background-color: #4085A5;
1716
    color: white;
1717
    font-size: 95%;
1718
    font-weight: normal;
1719
    height: 20px;
1720
    margin-left: -16px;
1721
    margin-top: -16px;
1722
    padding-bottom: 2px;
1723
    padding-left: 30px;
1724
    padding-top: 10px;
1725
    width: 482px;
1726
    margin-right:-16px;
1727
}
1728

    
1729

    
1730
#error-success.success h3 span.header-box, .notification-box h3 span.header-box {
1731
    background-color: #71c837;
1732
    display: block;
1733
    background-image: url("../images/save-green.png");
1734
    background-position: right 0;
1735
    background-repeat: no-repeat;
1736
    width: 80px;
1737
    padding: 3px 3px 3px 8px;
1738
    margin-top: -6px;
1739
    font-size: 90% !important;
1740
    margin-left: -11px;
1741
}
1742

    
1743
#error-success .popup-body, .notification-box .popup-body {
1744
    background: url("../images/popup-bg.png") repeat-x scroll 0 0 transparent;
1745
    margin-left: -16px;
1746
    margin-right: -16px;
1747
    margin-top: 1px;
1748
    min-height: 142px;
1749
    padding-top: 10px;
1750
}
1751

    
1752
#error-success .popup-body-inner, .notification-box .popup-body-inner {
1753
    background: url("../images/popup-inner-bg.png") repeat-x scroll 0 0 transparent;
1754
    font-size: 80%;
1755
    min-height: 120px;
1756
    margin-left: 20px;
1757
    padding-left: 15px;
1758
    width: 460px;
1759
}
1760

    
1761
#error-success .popup-separator, .notification-box .popup-seperator {
1762
    background-color: #74AEC9;
1763
    height: 1px;
1764
    font-size:1%;
1765
    width: 442px;
1766
    margin-bottom: 30px;
1767
}
1768

    
1769
#error-success .machine-now-building {
1770
    font-size: 95%;
1771
    padding-bottom: 7px;
1772
    padding-top: 10px;
1773
}
1774

    
1775
#error-success.success .machine-now-building {
1776
    padding-bottom: 14px !important;
1777
}
1778

    
1779
#error-success .password-container, .notification-box .password-container {
1780
    width: 430px;
1781
    padding: 5px;
1782
    border: 2px solid #75b54a;
1783
    background-color: #aade87;
1784
}
1785

    
1786
#error-success .password-header, .notification-box .password-header {
1787
    margin-bottom: 5px;
1788
}
1789

    
1790
#error-success .password, .notification-box .password {
1791
    color: #447821;
1792
}
1793

    
1794
#error-success .popup-details, .notification-box .popup-details {
1795
    border: 2px solid #FF7F2A;
1796
    float: left;
1797
    margin-left: 10px;
1798
    padding: 2px;
1799
}
1800

    
1801
#error-success.success .popup-details, .notification-box .popup-details {
1802
    border: none !important;
1803
    float: none !important;
1804
    margin-left: none !important;
1805
    margin-top: 10px;
1806
}
1807

    
1808
#error-success.success .popup-separator, .notification-box .popup-seperator {
1809
    margin-bottom: 14px !important;
1810
}
1811

    
1812
#error-success .write-password, .notification-box .write-password {
1813
    margin-bottom: 5px;
1814
    padding-left: 30px;
1815
}
1816

    
1817
#error-success .write-password-password, .notification-box .write-password-password {
1818
    padding-left: 30px;
1819
    color: #447821;
1820
    display: inline;
1821
    font-size: 110%;
1822
    font-weight: bold;
1823
}
1824

    
1825
#error-success .write-password-details, .notification-box .write-password-details {
1826
    font-size: 75%;
1827
}
1828

    
1829
.more-details {
1830
    display: block;
1831
}
1832

    
1833
.notification-box h3 span.header-box {
1834
    background: transparent;
1835
}
1836

    
1837
.notification-box .machine-now-building {
1838
    padding: 20px 0;
1839
}
1840

    
1841
.notification-box .header-box {
1842
    width: auto !important;
1843
}
1844

    
1845
.notification-box .password {
1846
    text-align: center;
1847
}
1848
.notification-box .password a:hover {
1849
    background-color: #447821;
1850
    color: #fff;
1851
}
1852

    
1853
.notification-box .password a {
1854
    padding: 0.2em;
1855
    text-align: center;
1856
    color: #447821;
1857
    font-weight: bold;
1858
    font-size: 1.2em;
1859
    text-decoration: none;
1860
}
1861

    
1862
.popup-details a:link, .popup-details a:visited {
1863
    color: black;
1864
}
1865

    
1866
.destroy .confirm_single .yes {
1867
    background-color: #880000;
1868
    color: #fff;
1869
}
1870

    
1871
.destroy .confirm_single .no {
1872
    background-color: #CC0000;
1873
    color: #880000;
1874
}
1875

    
1876
.destroy .confirm_single .yes:hover {
1877
    background-color:#CC0000;
1878
}
1879

    
1880
div.list div.actions a.selected#action-destroy {
1881
    color: #880000 !important;
1882
}
1883

    
1884
.vm-actions .destroy a#action-destroy.selected {
1885
    color: #880000 !important;
1886
}
1887

    
1888
/* Confirmation boxes */
1889
div.confirm_single, div.confirm_multiple, div.action_error {
1890
    display: none;
1891
    color: black;
1892
}
1893

    
1894
div.confirm_single button, div.confirm_multiple button, div.action_error button {
1895
    font-size: 100%;
1896
    cursor: pointer;
1897
    color: black;
1898
    height: 20px !important;
1899
}
1900

    
1901
div.confirm_single button {
1902
    border: none;
1903
    font-family: Arial, Helvetica, sans-serif;
1904
    line-height: 1em;
1905
    vertical-align: middle;
1906
    padding: 2px 6px;
1907
    padding-bottom:4px;
1908
    height: 15px;
1909
}
1910

    
1911
div.confirm_single button.yes {
1912
    width: 90px;
1913
    background-color:#FF7F2A;
1914
}
1915

    
1916
div.confirm_single button.yes:hover {
1917
    background-color: #FF9955;
1918
}
1919

    
1920
div.confirm_single button.no {
1921
    width: 20px;
1922
    margin-left:-5px;
1923
    background-color: #FF9955;
1924
    color:#d95d0a;
1925
}
1926

    
1927
div.confirm_single button.no:hover {
1928
    color: white;
1929
}
1930

    
1931
div.confirm_multiple_cont {
1932
    background-color: #406A7D;
1933
    margin-top: 0px;
1934
    padding: 3px;
1935
    border-top: 1px solid #444;
1936
    border-bottom: 1px solid #444;
1937
    padding-top:0px;
1938
    margin-top: -1px;
1939
}
1940

    
1941
div.confirm_reboot_required {
1942
}
1943

    
1944
div.confirm_multiple {
1945
    font-size: 65%;
1946
    z-index: 8000;
1947
    /*height: 28px;*/
1948
    width: 700px;
1949
    margin-top: 15px;
1950
}
1951

    
1952
div.confirm_multiple p {
1953
    float: left;
1954
    color: #FFF;
1955
    font-weight: bold;
1956
    margin: 7px 0 0 10px;
1957
}
1958

    
1959
#networks-pane {
1960
    display: none;
1961
}
1962

    
1963
#networks-pane div.confirm_multiple p {
1964
    margin: 7px 0 0 100px;
1965
}
1966

    
1967
div.confirm_multiple button {
1968
    float: right;
1969
    background-color: transparent;
1970
    border: 1px solid #5CA1C0;
1971
    margin: 4px 5px 0 0;
1972
}
1973

    
1974
div.confirm_multiple button.yes {
1975
    border-color: #FF7F2A;
1976
    padding: 0 12px;
1977
}
1978

    
1979
div.confirm_multiple button.yes:hover {
1980
    background-color: #FF7F2A;
1981
}
1982

    
1983
div.confirm_multiple button.no {
1984
    padding: 0px 16px;
1985
}
1986

    
1987
div.confirm_multiple button.no:hover {
1988
    background-color: #5CA1C0;
1989
}
1990

    
1991
div.action_error {
1992
    width: 120px;
1993
    margin: 14px 0 0 37px;
1994
    background-color: #981D1D;
1995
    font-size: 75%;
1996
    z-index:1;
1997
    color: #FFF;
1998
    position:absolute;
1999
    top: 0px;
2000
}
2001

    
2002
div.action_error .action-error-msg {
2003
    background-color: #fff;
2004
    color: #981D1D;
2005
    border: 1px solid #981D1D;
2006
    padding: 4px;
2007
}
2008
div.action_error .action-error-msg .action {
2009
    font-weight: bold;
2010
}
2011

    
2012
div.action_error .action-error-msg {
2013
    font-size: 0.8em;
2014
}
2015

    
2016
.action_error button {
2017
    width: 75px;
2018
    background-color: transparent;
2019
    border: 1px solid;
2020
    border-color: #981D1D;
2021
    color: #fff !important;
2022
    float: left;
2023
}
2024

    
2025
div.action_error button.details {
2026
    padding-right: 5px;
2027
    width: 100px;
2028
    border-bottom: 2px solid #981D1D;
2029
    border-right: 1px solid #981D1D;
2030
    border-left: 2px solid #981D1D;
2031
    background-color: #E24B4B;
2032
}
2033

    
2034
div.action_error button.close-action-error {
2035
    background-image: url("../images/option-action-remove.png");
2036
    background-color: #fff;
2037
    background-repeat: no-repeat;
2038
    background-position: center center;
2039
    width: 20px;
2040
    border-bottom: 2px solid #981D1D;
2041
    border-right: 2px solid #981D1D;
2042
    border-top: 1px solid #981D1D;
2043
}
2044

    
2045
div.action_error button.details:hover {
2046
    background-color: #FF7F2A;
2047
}
2048

    
2049
div#aboutuser{
2050
    float:right;
2051
    clear: both;
2052
    color: #FFFFFF;
2053
    font-size: 75%;
2054
    margin-top: -25px;
2055
}
2056

    
2057
div#user{
2058
    clear: both;
2059
    color: #FFFFFF;
2060
    font-size: 75%;
2061
    margin-top: 38px;
2062
    padding-bottom: 10px;
2063
    position: absolute;
2064
    right:0;
2065
}
2066

    
2067
div#user a{
2068
    color: #FFFFFF;
2069
    text-decoration: none;
2070
}
2071

    
2072
div#user a.current_lang {
2073
    color: #72ADC8;
2074
}
2075

    
2076
div#user .usermenu {
2077
    float: left;
2078
    cursor: pointer;
2079
    overflow: hidden;
2080
    padding-top: 5px;
2081
    margin-top: -6px;
2082
    position: relative;
2083
}
2084

    
2085
div#user .username {
2086
    display: block;
2087
    margin-right: 10px;
2088
    padding-right: 18px;
2089
    padding-left: 4em;
2090
    min-width: 70px;
2091
    text-align: right;
2092
    height: 20px;
2093
    background: url("../images/down-arrow-light.png") no-repeat right;
2094
    background-position: right 6px;
2095
    font-weight: normal;
2096
}
2097

    
2098
div#user .hovered {
2099
    background: #599EBD;
2100
    overflow: visible;
2101
    border-bottom: 1px solid #C7DFE9;
2102
}
2103

    
2104
div#user .hovered .username {
2105
    background-image: url("../images/down-arrow-lighter.png");
2106
}
2107

    
2108
div#user .active {
2109
    background-color: #BED5E0 !important;
2110
}
2111

    
2112
div#user .active .username {
2113
    color: #599EBD;
2114
    background-image: url("../images/down-arrow-lighter.png");
2115
}
2116

    
2117
div#user .useractions {
2118
    display: none;
2119
}
2120

    
2121
div#user .active .useractions {
2122
    display: block;
2123
    text-align: right;
2124
    color: #4085A5;
2125
    background-color: #D0E3ED;
2126
    margin-top:-1px;
2127
    border-top:1px solid #fff;
2128
    position: relative;
2129
    top: 1px;
2130
    box-shadow: 1px 1px 1px #aaa;
2131
    -moz-box-shadow: 1px 1px 1px #aaa;
2132
    -webkit-box-shadow: 1px 1px 1px #aaa;
2133
}
2134

    
2135
div#user .useractions li {
2136
    padding: 2px 10px;
2137
    border-bottom: 1px solid #efefef;
2138
    text-align: right;
2139
    display: block;
2140
    background-color: transparent;
2141
}
2142

    
2143
div#user .useractions li a {
2144
    color: #4085A5;
2145
    display: inline-block;
2146
    padding:5px 0;
2147
    padding-left: 30px;
2148
    padding-bottom: 6px;
2149
    background-repeat: no-repeat;
2150
    background-position: center left;
2151
}
2152

    
2153
div#user .useractions li.hovered {
2154
    background-color: #E1EFF6;
2155
}
2156

    
2157
div#user .useractions li.last {
2158
    border-bottom: none;
2159
}
2160

    
2161
div#user .useractions .logout a {
2162
    background-image: url("../images/icon-logout.png");
2163
}
2164

    
2165
div#user .langmenu {
2166
    float: left;
2167
    border-left: 1px solid #ffffff;
2168
    padding-left: 10px;
2169
    margin-left: -1px;
2170
}
2171

    
2172
div#user .langmenu .sep {
2173
    display: inline-block;
2174
    color: #72ADC8;
2175
}
2176

    
2177
.separator {
2178
    background-color: #74AEC9;
2179
    height: 10px;
2180
    width: 700px;
2181
    font-size: 1px;
2182
    line-height: 0px;
2183
}
2184

    
2185
#disks.separator {
2186
    background-color: #dea842;
2187
}
2188

    
2189
#networks.separator {
2190
    background-color: #6c535d;
2191
}
2192

    
2193
.network-machine h5 {
2194
    margin-bottom: 26px;
2195
    margin-top:0px;
2196
}
2197

    
2198
.machine-container .separator {
2199
    width: 508px;
2200
    height: 1px;
2201
    margin-top: 2px;
2202
    background-color: #5CA1C0;
2203
    margin-left: 13px;
2204
}
2205

    
2206
.editbuttons {
2207
    display: block;
2208
    clear: none;
2209
    width: 40px;
2210
    margin-right: 0px;
2211
    padding-top: 0px;
2212
    float: right;
2213
    cursor: pointer;
2214
    position: relative;
2215
    z-index: 1000;
2216
}
2217

    
2218
div.editbuttons div.save:hover, div.editbuttons div.cancel:hover {
2219
    background-color: #84b7d0;
2220
}
2221

    
2222
div.editbuttons div.cancel:hover {
2223
    background-image: url("../images/cancel-onhover.png");
2224
}
2225

    
2226
.editbuttons .cancel, .editbuttons .save {
2227
    background-repeat: no-repeat;
2228
    color: transparent;
2229
    height: 16px;
2230
    width: 16px;
2231
    float: left;
2232
}
2233

    
2234
.editbuttons .cancel {
2235
    background-image: url("../images/cancel.png");
2236
    margin-left: 3px;
2237
}
2238

    
2239
.editbuttons .save {
2240
    background-image: url("../images/save.png");
2241
    margin-left: 1px;
2242
}
2243

    
2244
.editbuttons img {
2245
    float:none !important;
2246
    margin: 0px !important;
2247
}
2248

    
2249
.network .namecontainer {
2250
    font-size: 1.1em;
2251
}
2252
.network .machine-name-div .namecontainer {
2253
    font-size: 1em;
2254
    font-weight: bold;
2255
}
2256

    
2257

    
2258
.namecontainer .name {
2259
    position: relative;
2260
}
2261

    
2262
.namecontainer .name .nametextbox, .network-rename-input {
2263
    z-index: 1000;
2264
}
2265

    
2266
.icon .nametextbox {
2267
    width: 255px;
2268
}
2269

    
2270
.nametextbox, .network-rename-input {
2271
    position: relative;
2272
    top: -3px;
2273
    font-size: 65%;
2274
    width: 240px;
2275
    border: 1px solid #aaaaaa;
2276
    padding: 2px;
2277
}
2278

    
2279
.large-spinner {
2280
    background: url("../images/icons/indicators/large/progress.gif");
2281
    margin-left: 298px;
2282
    margin-top: 0px;
2283
    height: 31px;
2284
    width: 49px;
2285
    position: absolute;
2286
    top: 200px;
2287
}
2288

    
2289
#machinesview-icon .large-spinner {
2290
    top: 170px;
2291
}
2292

    
2293
.list .large-spinner {
2294
    margin-top:-30px;
2295
}
2296

    
2297
.single .large-spinner {
2298
    margin-top: 50px;
2299
}
2300

    
2301
div#networks-container {
2302
    display: none;
2303
}
2304

    
2305
div#networks-container .large-spinner {
2306
    margin-top: 50px;
2307
}
2308

    
2309
/* tables in list view */
2310
div.list div.dataTables_filter {
2311
    font-size: 75%;
2312
    margin-bottom: 12px;
2313
}
2314

    
2315
div.list div.dataTables_filter input{
2316
    font-size: 100%;
2317
}
2318

    
2319
.dataTables_wrapper {
2320
    width: 515px;
2321
    padding-bottom: 40px;
2322
}
2323

    
2324
div.list table thead .sorting, div.list table thead .sorting_desc, div.list table thead .sorting_asc {
2325
    padding-right: 15px !important;
2326
}
2327

    
2328
div.list table {
2329
    width: 515px;
2330
    font-size: 75%;
2331
}
2332

    
2333
div.list table tbody td {
2334
    color: #3D3D3D;
2335
    padding:6px;
2336
    vertical-align: middle;
2337
    height: 20px;
2338
}
2339

    
2340
div.list table thead tr {
2341
    border-bottom: 1px solid #aaa;
2342
}
2343
div.list table thead tr th {
2344
    background-color: #CDE2EC;
2345
    background-image: url("../images/bg.gif");
2346
    background-repeat: no-repeat;
2347
    background-position: right 11px;
2348
    font-weight: normal;
2349
    border: 1px solid transparent;
2350
    border-bottom: none;
2351
    padding: 4px;
2352
    text-align: left;
2353
    vertical-align: middle;
2354
    cursor: pointer;
2355
}
2356

    
2357
div.list table thead .sorting_asc, div.list table thead .sorting_desc {
2358
    background-color: #5CA1C0;
2359
}
2360

    
2361
div.list table thead .sorting_asc {
2362
    background-image: url("../images/asc.gif");
2363
}
2364

    
2365
div.list table thead .sorting_desc {
2366
    background-image: url("../images/desc.gif");
2367
}
2368

    
2369
div.list table .selection div.expand-icon {
2370
    background-image: url("../images/asc.gif");
2371
    background-repeat: no-repeat;
2372
    position: relative;
2373
    cursor: pointer;
2374
    width: 15px;
2375
    height: 4px;
2376
    left: 19px;
2377
    top: -11px;
2378
}
2379

    
2380
ul.dropdown-selector {
2381
    background-color: #E6EEEE;
2382
    position: absolute;
2383
    margin-left: 1px;
2384
    display: block;
2385
    top: 255px;
2386
    font-size:75%;
2387
    width:40px;
2388
}
2389

    
2390
ul.dropdown-selector li {
2391
    padding: 4px;
2392
}
2393

    
2394
ul.dropdown-selector li:hover {
2395
    background-color: #5CA1C0;
2396
}
2397

    
2398
ul.dropdown-selector li a{
2399
    color: black;
2400
    text-decoration: none;
2401
}
2402

    
2403
div.list table span.imagetag {
2404
    display: none;
2405
}
2406

    
2407
div.list table thead .vmos {
2408
    width: 20px !important;
2409
    vertical-align:middle;
2410
}
2411

    
2412
div.list table .selection {
2413
    width: 20px !important;
2414
    text-align: left;
2415
    background-image: none;
2416
    padding-left: 6px;
2417
}
2418

    
2419
div.list table thead .vmflavor {
2420
    width: 100px !important;
2421
}
2422

    
2423
/* group column commented out for v0.5
2424
div.list table thead .vmgroup {
2425
    width: 40px !important;
2426
}
2427
*/
2428

    
2429
div.list table thead .vmstatus {
2430
    width: 50px !important;
2431
}
2432

    
2433
div.list table thead .vmname {
2434
    width: 110px !important;
2435
}
2436

    
2437
.spinner, .action-indicator {
2438
    clear: right;
2439
    float:right;
2440
    margin: 10px 6px 0 15px;
2441
}
2442

    
2443
.icon .spinner {
2444
    margin: 20px 4px 0 15px !important;
2445
}
2446

    
2447
.single .state .spinner {
2448
    margin: 20px 55px 0 15px !important;
2449
}
2450

    
2451
.action-indicator {
2452
    margin-right: 18px;
2453
}
2454

    
2455
.list span.action-indicator {
2456
    display: block;
2457
    width: 15px;
2458
    height: 20px;
2459
    margin: 0 !important;
2460
    float: none;
2461
}
2462

    
2463
.wave {
2464
    clear: right;
2465
    float:right !important;
2466
    margin: 10px 15px 0 15px !important;
2467
}
2468

    
2469
#networks-pane .spinner {
2470
    margin-top: 18px !important;
2471
}
2472

    
2473
.hidden {
2474
    display:none;
2475
}
2476

    
2477
div.actions a.selected, div.actions a.selected:hover, div.machine-actions a.selected, div.machine-actions a.selected:hover {
2478
    display:block !important;
2479
}
2480

    
2481
.action_error .message, .action_error .code {
2482
    display: none;
2483
}
2484

    
2485
.fixed {
2486
    bottom: 0;
2487
    position: fixed !important;
2488
}
2489

    
2490
/* Networks */
2491
#networks-pane {
2492
    background-color: transparent;
2493
    color: black;
2494
}
2495

    
2496
#networkscreate {
2497
}
2498

    
2499
.createbutton {
2500
    color: black;
2501
    background-color: #FF7F2A;
2502
    cursor: pointer;
2503
    padding: 7px 24px;
2504
    text-decoration: none;
2505
    border-left: 15px solid #FF9955;
2506
    margin-left: -15px;
2507
}
2508

    
2509
#networkscreate:hover {
2510
    background-color: #FF9955;
2511
}
2512

    
2513
#createcontainer {
2514
}
2515

    
2516
#networks-container {
2517
}
2518

    
2519
#networks-pane .public-networks {
2520
    background: #EFF7FA repeat scroll 0 0;
2521
    margin: 0 0 0px;
2522
    padding: 0 0 15px 0px;
2523
}
2524

    
2525
#networks-pane .private-networks .network:last-child {
2526
    border-bottom: none;
2527
}
2528

    
2529
#networks-pane .private-networks {
2530
    background: #EFF7FA repeat scroll 0 0;
2531
    padding: 15px 20px 20px 0px;
2532
    margin-top: 18px;
2533
}
2534

    
2535
.private-networks .network-cont:last-child {
2536
    border-bottom: none;
2537
}
2538

    
2539
.private-networks .network-cont {
2540
    border-bottom: 1px solid #D1E7F0;
2541
    padding-bottom:5px;
2542
    margin-bottom: 5px;
2543
    width: 520px;
2544
}
2545

    
2546
.private-networks .network {
2547
    padding-top: 10px;
2548
    padding-bottom: 10px;
2549
}
2550

    
2551
#public-template, #private-template, #public-machine-template, #private-machine-template {
2552
    display:none;
2553
}
2554

    
2555
div.network a.action-network-add {
2556
    display: none;
2557
}
2558

    
2559
div.network a.action-network-destroy {
2560
    margin-top: 32px !important;
2561
    width: 50px;
2562
    display: none;
2563
}
2564

    
2565
div.network {
2566
    clear: both;
2567
    padding: 5px 20px 5px 20px;
2568
    width: 480px;
2569
    position: relative;
2570
}
2571

    
2572
#private-template {
2573
    margin: 2px 0 0 -30px;
2574
}
2575

    
2576
div.network-placeholder {
2577
    margin-left: 33px;
2578
}
2579

    
2580
div.private-networks div.network-placeholder {
2581
}
2582

    
2583
div.network-cable {
2584
    border-left: 3px solid #FF7F2A;
2585
    float: left;
2586
    margin-left: -40px;
2587
    margin-top: -45px;
2588
    height: 185px;
2589
    overflow: hidden;
2590
}
2591

    
2592
.first div.network-cable {
2593
    height:143px;
2594
    margin-top:-6px;
2595
    position: relative;
2596
}
2597

    
2598
div.network-contents div.machines-list div.first {
2599
    margin-top:0;
2600
}
2601

    
2602
.last div.network-cable {
2603
    height:85px;
2604
}
2605

    
2606
div.firewall-cable {
2607
    border-left: 3px solid #FF7F2A;
2608
    float: left;
2609
    margin-left: -100px;
2610
    margin-top: -20px;
2611
    height: 110px;
2612
}
2613

    
2614
.last div.firewall-cable {
2615
    display:none;
2616
}
2617

    
2618
div.network a:hover {
2619
    text-decoration: underline;
2620
    cursor: pointer;
2621
}
2622

    
2623
#networks-container .name {
2624
    font-size: 75%;
2625
}
2626

    
2627
div.network-machines, div.firewall {
2628
    font-size: 75%;
2629
    margin-left: 70px;
2630
}
2631

    
2632
div.firewall {
2633
    margin-left: 60px;
2634
    margin-bottom: 3px;
2635
    margin-top: -3px;
2636
}
2637

    
2638
div.firewall .firewall-options {
2639
    float: left;
2640
}
2641

    
2642
div.machines-header, div.firewall-header {
2643
    background-color: #A1C8DB;
2644
    color: white;
2645
    cursor: pointer;
2646
    height: 17px;
2647
    width: 103px;
2648
}
2649

    
2650
 div.private-networks div.machines-header {
2651
    margin-top: -5px;
2652
}
2653

    
2654
div.network:hover div.machines-header, div.network:hover div.firewall-header {
2655
    background-color: #84b7d0;
2656
}
2657

    
2658
div.network-machine:hover div.firewall-header {
2659
    background-color: #5CA1C0;
2660
}
2661

    
2662
div.firewall-label.darker {
2663
    background-color: #4085a5;
2664
}
2665

    
2666
.state {
2667
}
2668

    
2669
.network .state {
2670
    font-size: 75%;
2671
    position: absolute;
2672
    right: 10px;
2673
    top: 5px;
2674
}
2675

    
2676
div.network div.actions {
2677
    float: right;
2678
    font-size: 75%;
2679
    font-weight: normal;
2680
    height: 70px;
2681
    width: 100px;
2682
    position: absolute;
2683
    right: -100px;
2684
    top: 0;
2685
}
2686

    
2687
div.network div.machine-actions {
2688
    text-decoration: none;
2689
    float: right;
2690
    margin: -17px -180px 0 0;
2691
    font-weight: normal;
2692
    font-size: 75%;
2693
}
2694

    
2695
div.network div.actions a, div.network div.machine-actions a {
2696
    text-decoration: none;
2697
    height: 15px;
2698
    color: black;
2699
    visibility: hidden;
2700
    display: block;
2701
}
2702

    
2703

    
2704
div.network div.machine-actions a {
2705
    margin: 8px 0 0 8px;
2706
}
2707
div.network div.net-actions a {
2708
    margin: 0 0 8px 8px;
2709
    width: 168px;
2710
}
2711
div.network div.action-container {
2712
    bottom: auto;
2713
}
2714

    
2715
div.network div.net-actions .confirm_single {
2716
    position: absolute;
2717
    left: 96px;
2718
    width: 150px;
2719
    margin: 0 0px -5px 0;
2720
    font-size: 100%;
2721
}
2722

    
2723
div.network div.actions a:hover, div.network div.machine-actions a:hover {
2724
    display: block;
2725
    background-color:#A1C8DB;
2726
    opacity: 0.8;
2727
    filter: alpha(opacity = 80);
2728
}
2729

    
2730
div.network.expand .net-actions a {
2731
    visibility: visible;
2732
}
2733

    
2734
div.network:hover div.actions a, div.network-machine:hover div.machine-actions a {
2735
    visibility: visible;
2736
}
2737

    
2738
div.network div.machine-actions a.action-destroy.selected {
2739
    color: #880000 !important;
2740
}
2741

    
2742
div.network div.actions a.visible,
2743
div.network div.net-vm-actions a.visible,
2744
div.network div.actions a.selected:hover, div.network div.machine-actions a.selected {
2745
    background-color: transparent !important;
2746
    visibility: visible!important;
2747
}
2748

    
2749
div.network .net-vm-actions .confirm_single {
2750
    font-size: 100% !important;
2751
    margin-right: -20px !important;
2752
    position: absolute !important;
2753
    top: 7px;
2754
    right:0;
2755
}
2756

    
2757
div.network div.display a {
2758
    visibility: visible;
2759
}
2760

    
2761
div.network-machine div.machine-actions a.action-details {
2762
    margin-top: 7px;
2763
    width: 168px;
2764
}
2765

    
2766
div.network .net-actions {
2767
    margin-right:5px !important;
2768
    margin-top:0px !important;
2769
    height: 80px !important;
2770
}
2771

    
2772
div.network .net-actions .action-container.destroy {
2773
    position: relative;
2774
    bottom: auto;
2775
}
2776

    
2777
div.network:hover {
2778
    background-color: #A1C8DB !important;
2779
}
2780

    
2781
.network-logos {
2782
    float:left;
2783
    padding-right: 10px;
2784
}
2785

    
2786
.network-logos:hover {
2787
    cursor: pointer;
2788
}
2789

    
2790
.state div {
2791
    text-align: right;
2792
    margin: 4px 1px -4px;
2793
}
2794

    
2795
.public-networks .state div {
2796
    margin-top: 4px;
2797
}
2798

    
2799
.private-networks .state div {
2800
    margin-top: 9px;
2801
    margin-bottom: -12px;
2802
}
2803

    
2804
.network .name-div {
2805
    margin-bottom: 15px;
2806
    margin-top: 0px;
2807
}
2808

    
2809
div.indicator {
2810
    clear: none;
2811
    float: right;
2812
    height: 11px;
2813
    margin: 3px -1px;
2814
    width: 10px;
2815
}
2816

    
2817
#private-networks {
2818
    margin-top: 20px;
2819
}
2820

    
2821
.private-networks .editbuttons {
2822
    margin-right: 117px;
2823
    margin-top: 1px;
2824
}
2825

    
2826
.private-networks div.confirm_single {
2827
    margin: 45px -219px -5px 0;
2828
    font-size: 80%;
2829
}
2830

    
2831
.private-networks .network-machine div.confirm_single {
2832
    margin: 0 -199px 0 0;
2833
}
2834

    
2835
.private-networks .state {
2836
}
2837

    
2838
.private-networks div.machines-list {
2839
    padding-top: 3px;
2840
}
2841

    
2842
span.rename-network, span.configure {
2843
    background-repeat: no-repeat;
2844
    color: transparent;
2845
    font-size: 75%;
2846
    font-weight: normal;
2847
    margin-left: 10px;
2848
    margin-right: 10px;
2849
    padding-left: 10px;
2850
    text-align: left;
2851
}
2852

    
2853
span.rename-network {
2854
    cursor: pointer;
2855
}
2856

    
2857
div.name-div:hover span.rename-network {
2858
    color: #3D3D3D;
2859
    margin-top: 0.4em;
2860
    background-image: url("../images/pencil.png");
2861
    background-position: 0 3px;
2862
}
2863

    
2864
div.network:hover a.rename {
2865
    color: #3d3d3d;
2866
}
2867

    
2868
.network-separator {
2869
    background-color: #5CA1C0;
2870
    height: 1px;
2871
    margin: 2px 0 0 -5px;
2872
    width: 480px;
2873
    font-size: 1%;
2874
    line-height: 1px;
2875
}
2876

    
2877
.network-contents {
2878
    margin-left: -4px;
2879
    width: 504px;
2880
    clear: both;
2881
    background: url("../images/orange-border.png") no-repeat;
2882
    background-position: 33px bottom;
2883
}
2884
.network-contents.last-expanded {
2885
    background-position-y: -2600px;
2886
}
2887

    
2888
.network-machine {
2889
    border-bottom: 1px solid #5CA1C0;
2890
}
2891
.network-machine:last-child {
2892
    border-bottom: none;
2893
}
2894

    
2895
.network-machine .state div {
2896
    text-align: left;
2897
}
2898

    
2899
.network-machine {
2900
    margin-left: 35px;
2901
    padding-bottom: 10px;
2902
    padding-left: 5px;
2903
    padding-top: 10px;
2904
    position: relative;
2905
}
2906

    
2907
.network-machine .ips {
2908
    position: absolute;
2909
    right:0;
2910
    top:40px;
2911
    text-align: right;
2912
    padding-right: 10px;
2913
    font-size: 70%;
2914
}
2915

    
2916
.network-machine .logo {
2917
    float:left;
2918
    padding-right: 10px;
2919
    position:relative;
2920
}
2921

    
2922
#networks-container .machine-name {
2923
    text-decoration: none !important;
2924
    margin-bottom: 10px;
2925
    color: #000000;
2926
    margin-top: -4px;
2927
}
2928

    
2929
.private-networks .separator {
2930
    background-color: #5CA1C0;
2931
    height: 1px;
2932
    margin: 3px 0 -2px -10px;
2933
    width: 485px;
2934
}
2935

    
2936
.network-machine .state {
2937
    margin-right: 18px;
2938
}
2939

    
2940
.network-machine .state .status {
2941
    margin-bottom: 4px;
2942
}
2943

    
2944
.machine-name .name {
2945
}
2946

    
2947
.machine-name .namecontainer {
2948
    line-height: 18px;
2949
    margin-bottom: 20px;
2950
}
2951

    
2952
div.network-machine:hover {
2953
    background-color: #84B7D0;
2954
}
2955

    
2956
.machines {
2957
    width: 416px;
2958
    margin-bottom: -8px;
2959
    margin-top: 10px;
2960
}
2961

    
2962
div.empty-network-slot {
2963
    height: 60px;
2964
}
2965

    
2966
div.network-remove-machine, div.network-add-machine {
2967
    background-color: #FB822F;
2968
    color: #bc4b00;
2969
    width:90px;
2970
    height:18px;
2971
    float:left;
2972
    margin:40px 0 0 -100px;
2973
}
2974

    
2975
span.remove-icon {
2976
    font-size: 80%;
2977
    margin-left: 15px;
2978
    position: relative;
2979
    bottom:1px;
2980
}
2981

    
2982
div.add-icon {
2983
    margin-left: 15px;
2984
    margin-top: -1px;
2985
    cursor: pointer;
2986
}
2987

    
2988
span.remove-icon:hover, span.add-icon:hover {
2989
    cursor:pointer;
2990
    color: #fff;
2991
}
2992

    
2993
div.network-add-machine {
2994
    margin:43px 0 0 0px;
2995
}
2996

    
2997
.firewall-on {
2998
    color: #42E342;
2999
}
3000

    
3001
.firewall-off {
3002
    color: #F82E2E;
3003
}
3004

    
3005
.firewall-content {
3006
    color: black;
3007
    font-size: 60%;
3008
    margin-left: 60px;
3009
    height: 55px;
3010
}
3011

    
3012
.firewall-content .checkbox-legends {
3013
    cursor: pointer;
3014
}
3015

    
3016
.firewall-content .checkbox-legends.current {
3017
    font-weight: bold;
3018
}
3019

    
3020
.firewall-content .checkbox-legends {
3021
    vertical-align: text-top;
3022
}
3023

    
3024
.checkbox-legends a {
3025
    color: black;
3026
    text-decoration: underline;
3027
    font-size: 100%;
3028
}
3029

    
3030
h5.machine-connect {
3031
    font-size: 75%;
3032
    margin-bottom: 3px;
3033
}
3034

    
3035
.machine-connect span {
3036
    text-decoration: underline;
3037
}
3038

    
3039
h5.machine-connect span:hover {
3040
    cursor: pointer;
3041
}
3042

    
3043
.firewall-apply {
3044
    background-color: #4085a5;
3045
    border: medium none;
3046
    float: right;
3047
    font-size: 105%;
3048
    height: 18px;
3049
    margin-right: 5px;
3050
    margin-top: 3px;
3051
    width: 75px;
3052
    position: relative;
3053
    bottom:20px;
3054
}
3055

    
3056
.firewall-apply:hover {
3057
    background-color:#5CA1C0;
3058
}
3059

    
3060
.name-div {
3061
    margin: -9px 0 30px 70px;
3062
}
3063

    
3064
.machine-name-div {
3065
    margin-bottom: 20px;
3066
    margin-left: 60px;
3067
}
3068

    
3069
div.reboot-dialog {
3070
    display: none;
3071
    color: black;
3072
    background-color: #4085A5;
3073
    font-size: 75%;
3074
    margin-top: 15px;
3075
    width: 698px;
3076
    z-index: 1;
3077
}
3078

    
3079
div#reboot-machine-template, div.reboot-machine-entry {
3080
    display: none;
3081
    padding: 0 0 10px 35px;
3082
    width: 300px;
3083
}
3084

    
3085
div.reboot-dialog p {
3086
    color: #FFFFFF;
3087
    padding: 10px 0 10px 10px;
3088
}
3089

    
3090
div.reboot-dialog button {
3091
    float:right;
3092
    border: 1px solid #FF7F2A;
3093
    background-color: transparent;
3094
    font-size:100%;
3095
}
3096

    
3097
div.reboot-dialog button:hover {
3098
    background-color: #FF7F2A;
3099
}
3100

    
3101
div.reboot-dialog button.reboot-all {
3102
    margin: -30px 35px 0 0;
3103
}
3104

    
3105
div.reboot-dialog button.reboot-single {
3106
    color: black;
3107
    margin-top: -20px;
3108
}
3109

    
3110
div.reboot-dialog div.code, div.reboot-dialog div.action, div.reboot-dialog div.message, div.reboot-dialog button.details {
3111
    display:none;
3112
}
3113

    
3114
div.reboot-dialog button.details {
3115
    border-color: #800000;
3116
    margin-top: -20px;
3117
}
3118

    
3119
div.reboot-dialog button.details:hover {
3120
    background-color: #800000;
3121
}
3122

    
3123
/* Metadata */
3124
.machine .info-content {
3125
    display: none;
3126
}
3127

    
3128
.metadata-container {
3129
    line-height: 12px;
3130
    height: 85px;
3131
    background-color: #84b7d0;
3132
}
3133

    
3134
.metadata-column {
3135
    border-right: 1px solid #5CA1C0;
3136
    color: black;
3137
    float: left;
3138
    font-size: 60%;
3139
    margin-top: 3px;
3140
    height: 70px;
3141
    padding-bottom: 5px;
3142
}
3143

    
3144
.vm-stats {
3145
    padding-left: 10px;
3146
    padding-right: 5px;
3147
    width: 220px;
3148
}
3149

    
3150
.vm-stats div.stat-content {
3151
    height: 18px;
3152
}
3153

    
3154
.vm-stats div.stat-content img {
3155
    margin: 0;
3156
}
3157

    
3158
.vm-stats div img.stat-busy {
3159
    margin-top: -7px;
3160
    margin-left: 90px;
3161
}
3162

    
3163
.vm-stats div.stat-content img.busy {
3164
    margin-left: 95px;
3165
}
3166

    
3167
.vm-stats div.stat-error {
3168
    display:none;
3169
}
3170

    
3171
div.stat-error {
3172
    color: #f00;
3173
}
3174

    
3175
.single div.stat-error {
3176
    text-align: center;
3177
    font-size: 0.8em;
3178
}
3179

    
3180
.metadata-column {
3181
    margin-top: 4px;
3182
}
3183

    
3184
.vm-details {
3185
    width: 130px;
3186
    margin-left:17px;
3187
}
3188

    
3189
.vm-details.metadata-column {
3190
    padding-top: 5px;
3191
    height: 65px;
3192
}
3193

    
3194
.vm-details .image-details {
3195
    margin-top: 8px;
3196
}
3197

    
3198
.vm-details .vm-detail {
3199
    display: block;
3200
}
3201

    
3202
.vm-details span.value {
3203
    color: #444;
3204
}
3205

    
3206
.single-container .lower .stat-busy {
3207
    margin-top: 10px;
3208
    margin-left: 325px;
3209
}
3210

    
3211
.vm-metadata {
3212
    padding-left: 10px;
3213
    width: 100px;
3214
    border: none;
3215
}
3216

    
3217
.metadata-left {
3218
}
3219

    
3220
.metadata-right {
3221
    width: 73px;
3222
    float:left;
3223
    height: 35px;
3224
    padding-left: 5px;
3225
    position:relative;
3226
    overflow:hidden;
3227
}
3228

    
3229
.metadata-right .items {
3230
    position:absolute;
3231
    height:20000em;
3232
}
3233

    
3234
.metadata-keys-container {
3235
    height: 60px;
3236
    float: left;
3237
}
3238

    
3239
.single .metadata-keys-container {
3240
    float: none;
3241
    height: auto;
3242
    margin-bottom: 5px;
3243
}
3244

    
3245
.single a.manage-metadata {
3246
    font-size: 80%;
3247
    margin-left:4px;
3248
    color: #383838;
3249
}
3250

    
3251
a.manage-metadata, a.stats-report {
3252
    font-size: 100%;
3253
    color: black;
3254
    margin-left:17px;
3255
    text-decoration: underline;
3256
}
3257

    
3258
a.stats-report {
3259
    margin: 15px 0  0 80px;
3260
}
3261

    
3262
div.machine a.manage-metadata:hover {
3263
    background-color: transparent;
3264
}
3265

    
3266
.single .metadata-actions, .single .metadata-keys-container .items {
3267
    padding-left: 5px;
3268
}
3269
.metadata-actions, .metadata-keys-container .items{
3270
    margin-top: 5px;
3271
}
3272

    
3273
.singe .metadata-actions, .single .metadata-keys-container .items{
3274
    font-size: 80%;
3275
    line-height: 12px;
3276
    width: 300px;
3277
}
3278

    
3279
.metadata-actions .prev,  .metadata-actions .next{
3280
    float:left;
3281
    width:29px;
3282
    height:6px;
3283
    cursor: pointer;
3284
}
3285

    
3286
.metadata-actions .prev {
3287
    background: url("../images/roll-up.png") no-repeat scroll 0 0 transparent;
3288
}
3289

    
3290
.metadata-actions .next {
3291
    background: url("../images/roll-down.png") no-repeat scroll 0 0 transparent;
3292
}
3293

    
3294
.scrollable {
3295
    position:relative;
3296
    overflow:hidden;
3297
    height: 35px;
3298
    width: 120px;
3299
    margin-bottom:2px;
3300
}
3301

    
3302
.scrollable .items {
3303
    position:absolute;
3304
    height:20000em;
3305
}
3306

    
3307
/* single view */
3308
.single {
3309
    color: #383838;
3310
}
3311

    
3312
.single .column1 {
3313
    float: left;
3314
    margin: 1px 0 25px 17px;
3315
    width: 140px;
3316
}
3317

    
3318
.single .column1 .state {
3319
    float: left;
3320
    margin-left: 4px;
3321
    padding-bottom: 6px;
3322
    padding-top: 3px;
3323
    position: relative;
3324
    right: 0;
3325
    text-align: center;
3326
    width: 126px;
3327
}
3328

    
3329
.single .column1 .state-label {
3330
    padding-top: 5px;
3331
}
3332

    
3333
.single .column1 .indicators {
3334
    margin-right: 38px !important;
3335
}
3336

    
3337
.single div.connect-arrow {
3338
    margin-left: -17px;
3339
}
3340

    
3341
.single div.connect-border {
3342
    margin-left: -29px;
3343
}
3344

    
3345
.single .single-actions {
3346
    width: 150px;
3347
    height: 60px;
3348
    margin-bottom: 45px;
3349
    margin-left: -10px;
3350
}
3351

    
3352
.single .vm-actions .action-container {
3353
    margin-bottom: 1px;
3354
}
3355

    
3356
.single .vm-actions .action-container .confirm_single {
3357
    right: -45px;
3358
}
3359

    
3360
.single .vm-actions .action-container.destroy .confirm_single {
3361
}
3362

    
3363
.single .vm-actions .action-container.destroy {
3364
    bottom: -20px;
3365
}
3366

    
3367
.single a.single-action {
3368
    text-decoration: none;
3369
    cursor: pointer;
3370
    display: block;
3371
}
3372

    
3373
.single a.single-action:hover {
3374
    background-color:#A1C8DB;
3375
    width: 162px;
3376
    opacity: 0.8;
3377
    filter: alpha(opacity = 80);
3378
}
3379

    
3380
.single .destroy a.single-action.selected {
3381
    color: #880000 !important;
3382
}
3383

    
3384
.single a.single-action.selected {
3385
    color: #FF7F2A !important;
3386
    width: 50px !important;
3387
}
3388

    
3389
.single a.single-action.selected:hover {
3390
    background-color:transparent;
3391
}
3392

    
3393
.single .spinner, .single .action-indicator {
3394
    margin: 15px 45px 0 0px !important
3395
}
3396

    
3397
.single .action-indicator {
3398
    margin-right: 55px !important;
3399
}
3400

    
3401
.single .wave {
3402
    margin: 15px 53px 0 0px !important
3403
}
3404

    
3405
.icon div.action_error {
3406
    font-size: 100%;
3407
}
3408

    
3409
.single div.action_error {
3410
    position: absolute;
3411
    top: 29px;
3412
    right: 35px;
3413
}
3414

    
3415
.single .column2 {
3416
    background-color: #A1C8DB;
3417
    float: left;
3418
    font-size: 78%;
3419
    line-height: 17px;
3420
    margin: 0 0 10px 5px;
3421
    width: 358px;
3422
}
3423

    
3424
.single .column2 .machine-labels {
3425
    float: left;
3426
    font-size: 90%;
3427
    margin-left: 10px;
3428
    margin-top: 10px;
3429
    width: 125px;
3430
}
3431

    
3432
.single .machine-detail.title {
3433
    background-color: #74AEC9;
3434
    color: #fff;
3435
    padding: 4px 6px;
3436
    font-size: 0.8em;
3437
    width: 346px;
3438
    margin-left: 5px;
3439
    float: left;
3440
}
3441

    
3442
.single .column2 .machine-details {
3443
    float: right;
3444
    text-align: right;
3445
    font-size: 90%;
3446
    width: 210px;
3447
    margin-right: 10px;
3448
    margin-top: 10px;
3449
}
3450

    
3451
.single .column2 .name, .single .column2 .disk, .single .column2 .image-size, .single .column2 .ipv6 {
3452
    margin-bottom: 13px;
3453
}
3454

    
3455
.single .tags {
3456
    clear: both;
3457
    margin-bottom: 10px;
3458
    margin-left: 10px;
3459
}
3460

    
3461
.single .tags-label {
3462
    float: left;
3463
    padding: 0 5px;
3464
    width: 30px;
3465
}
3466

    
3467
.single .tags-down-arrow {
3468
    background: url("../images/tags-down-arrow.png") no-repeat scroll 1px 7px transparent;
3469
    float: left;
3470
    height: 16px;
3471
    width: 9px;
3472
}
3473

    
3474
.single .tags-header .info-header{
3475
    padding-top:0;
3476
    padding-bottom:0;
3477
}
3478

    
3479
.single .tags-header {
3480
    font-size: 0.62em;
3481
    cursor: pointer;
3482
    float: left;
3483
    margin-bottom:5px;
3484
}
3485

    
3486
.single .tags-header span.label {
3487
    font-size: 104%;
3488
}
3489

    
3490
.single .tags-content {
3491
    background-color: #84B7D0;
3492
    clear: both;
3493
    height: auto;
3494
    padding-bottom: 5px;
3495
    padding-top: 5px;
3496
    width: 300px;
3497
}
3498

    
3499
.single .column3 {
3500
    background-color: #A1C8DB;
3501
    width: 150px;
3502
    overflow: visible;
3503
    padding-bottom: 10px;
3504
    position: absolute;
3505
    right: 20px;
3506
    top: 130px;
3507
}
3508

    
3509
.single .col3 {
3510
    float: right;
3511
    width: 150px;
3512
    margin-right: 15px;
3513
    margin-bottom: 15px;
3514
}
3515

    
3516
.single .column3 .controls {
3517
    font-size: 80%;
3518
    height: 20px;
3519
    padding-left: 7px;
3520
    padding-right: 7px;
3521
    padding-top: 8px;
3522
    padding-bottom: 5px;
3523
    border-bottom: 1px solid #84B7D0;
3524
}
3525

    
3526
.single .column3 .vm-control:hover {
3527
    background-color: #5CA1C0;
3528
}
3529

    
3530
.single .column3 .previous {
3531
    float:left;
3532
    width: 72px;
3533
}
3534

    
3535
.single .column3 .next {
3536
    float: right;
3537
    text-align: center;
3538
    width: 60px;
3539
}
3540

    
3541
.single .column3 .next-label {
3542
    float: right;
3543
    margin-right: 3px;
3544
    margin-top: -2px;
3545
}
3546

    
3547
.single .column3 .next-arrow {
3548
    float: right;
3549
    height: 18px;
3550
    width: 10px;
3551
    background: url("../images/right-arrow.png") no-repeat scroll 3px 2px transparent;
3552
}
3553

    
3554
.single .column3 .prev-label {
3555
    float: left;
3556
    margin-left: 3px;
3557
    margin-top: -2px;
3558
}
3559

    
3560
.single .column3 .prev-arrow {
3561
    background: url("../images/left-arrow.png") no-repeat scroll 3px 2px transparent;
3562
    float: left;
3563
    height: 18px;
3564
    width: 10px;
3565
}
3566

    
3567
.single .column3 .separator {
3568
    width: 135px;
3569
    height: 1px;
3570
    background-color: #84B7D0;
3571
    margin: 0 0 0 7px;
3572
    clear: both;
3573
}
3574

    
3575
.single .column3 .servers {
3576
    font-size: 80%;
3577
    line-height: 15px;
3578
    padding-top: 10px;
3579
    text-align: right;
3580
    overflow: visible;
3581
    position: relative;
3582
}
3583

    
3584
.single .column3 .server-name {
3585
    margin-left: 10px;
3586
    padding-right: 5px;
3587
    cursor: pointer;
3588
    padding-bottom: 2px;
3589
}
3590
div.single div.column3 div.server-name:hover {
3591
    background-color: #5CA1C0;
3592
}
3593
.single .column3 .column3-selected {
3594
    background-color: #84B7D0;
3595
    color: white;
3596
    opacity: 0.8;
3597
    padding-left: 9px;
3598
    width: 160px;
3599
    filter: alpha(opacity = 80);
3600
    position: relative;
3601
    width: 126px;
3602
}
3603

    
3604
.single .toggler {
3605
    color: #FFFFFF;
3606
    float: right;
3607
    font-size: 140%;
3608
}
3609

    
3610
.single .cpu-usage, .single .network-usage {
3611
    text-align: center;
3612
    padding-top: 15px;
3613
    margin-bottom: 5px;
3614
    font-size: 90%;
3615
    font-weight: bold;
3616
}
3617

    
3618
.single .cpu-graph, .single .network-graph {
3619
    margin-left: 20px;
3620
    margin-bottom:30px;
3621
    width: 660px;
3622
}
3623

    
3624
.single div.lower .stats-select .stats-select-option.selected {
3625
    background-color: #4085A5;
3626
    color: #fff;
3627
}
3628

    
3629
.single div.lower .stats-select .stats-select-option {
3630
    cursor: pointer;
3631
    background-color: #DDF1FB;
3632
    color: #4085A5;
3633
    display: block;
3634
    float: left;
3635
    padding: 7px 10px;
3636
    font-size: 0.7em;
3637
}
3638

    
3639
.single div.lower img.stats {
3640
    margin-left: 82px;
3641
}
3642

    
3643
.single div.lower img.stats {
3644
    display: none;
3645
}
3646

    
3647
.single .single-image {
3648
    width: 126px;
3649
    height: 136px;
3650
    margin-bottom: 10px;
3651
    margin-left: 4px;
3652
    background-image: url("../images/icons/machines/large/unknown-sprite.png");
3653
    background-repeat: no-repeat;
3654
    cursor: pointer;
3655
}
3656

    
3657
.single .single-image-state1 {
3658
    background-position: 0px 0;
3659
}
3660

    
3661
.single .single-image-state3 {
3662
    background-position: -252px 0;
3663
}
3664

    
3665
.single .single-image-state4 {
3666
    background-position: -378px 0;
3667
}
3668

    
3669
.single .single-image-state2 {
3670
    background-position: -126px 0;
3671
}
3672

    
3673
.single .column3 .previous, .single .column3 .next {
3674
    cursor: pointer;
3675
    background-color: #84B7D0;
3676
    color: white;
3677
    font-size: 100%;
3678
    height: 15px;
3679
    padding-top: 2px;
3680
}
3681

    
3682
.single .column3 .disabled {
3683
    opacity: 0.5;
3684
    filter: alpha(opacity = 50);
3685
}
3686

    
3687
.single div.lower {
3688
    clear:both;
3689
    background: #EFF7FA repeat scroll 0 0;
3690
    width: 700px;
3691
    padding-bottom: 15px;
3692
}
3693

    
3694
.single div.upper {
3695
    background: transparent;
3696
    margin-bottom: 10px;
3697
    overflow: visible;
3698
    width: 700px;
3699
    background: #EFF7FA repeat scroll 0 0;
3700
}
3701

    
3702
/* console css */
3703
.console-header-logo {
3704
    padding-top: 17px;
3705
    margin-left: 30px;
3706
    position: fixed;
3707
}
3708

    
3709
#console-header div.help-text {
3710
    font-size: 75%;
3711
    font-weight:bold;
3712
    color:#FFFFFF;
3713
    float:left;
3714
    position: absolute;
3715
    margin: 45px 0 0 2px;
3716
}
3717

    
3718
div.console-container {
3719
    margin: 0 0em;
3720
    height: auto;
3721
}
3722

    
3723
#wrapper.console {
3724
    width: auto;
3725
}
3726

    
3727
.console-info {
3728
    font-size:80%;
3729
    color: white;
3730
    float:left;
3731
    position:relative;
3732
    margin: 15px 0 0 480px;
3733
}
3734

    
3735
applet {
3736
    width:100%;
3737
    height:100%;
3738
}
3739

    
3740
div.console-footer {
3741
    /* this is for version 0.5*/
3742
    display: none;
3743
}
3744

    
3745
.console-footer #footer-text{
3746
    float:left;
3747
    left: auto;
3748
    margin-left:30px;
3749
}
3750

    
3751
/* add network wizard (see also #wizard for shared classes) */
3752
#networks-wizard .header {
3753
    background-color: #4085A5;
3754
    height: 56px;
3755
}
3756

    
3757
#networks-wizard div.name-input {
3758
    margin: 75px 0 0 55px;
3759
}
3760

    
3761
#networks-wizard input {
3762
    border: 1px solid #CCCCCC;
3763
    color: #445566;
3764
    letter-spacing: 1px;
3765
    width: 170px;
3766
}
3767

    
3768
#networks-wizard span.help {
3769
    font-style: italic;
3770
    font-size: 80%;
3771
    margin-left: 10px;
3772
}
3773

    
3774
#networks-wizard .separator-end {
3775
    background-color: #387693;
3776
    height: 6px;
3777
    width: 479px;
3778
    margin-left: -13px;
3779
    margin-top: 19px;
3780
}
3781

    
3782
.red {
3783
    color: red;
3784
}
3785

    
3786
/* add server to network wizard (see also #metadata-wizard for shared classes) */
3787
#add-machines-wizard span.machine-name {
3788
    margin-left: 4px;
3789
    vertical-align: text-top;
3790
}
3791

    
3792
#add-machines-wizard img.list-logo {
3793
    margin: 2px 1px 1px;
3794
}
3795

    
3796
.css-panes {
3797
    clear: both;
3798
    position: relative;
3799
    z-index: 10;
3800
}
3801

    
3802
.last .firewall-content {
3803
}
3804

    
3805
#pub .last .network-separator {
3806
    display:none;
3807
}
3808

    
3809
.public-networks .empty-network-slot {
3810
    display: none;
3811
}
3812

    
3813
.clearfix {
3814
    display: block;
3815
    width: auto;
3816
    zoom: 1;
3817
}
3818

    
3819
/* float clearing for all browsers except the devil one */
3820
.clearfix:after{
3821
  clear: both;
3822
  content: ".";
3823
  display: block;
3824
  height: 0;
3825
  visibility: hidden;
3826
  font-size: 0;
3827
}
3828

    
3829
* html .clearfix {
3830
    display: inline-block;
3831
}
3832

    
3833
.icon .cont-toggler {
3834
    margin-top: -1px;
3835
}
3836

    
3837
.icon .wave {
3838
    margin-right: 4px !important;
3839
    margin-top: 15px !important;
3840
}
3841

    
3842
.icon .status {
3843
    margin-right: 3px;
3844
}
3845

    
3846
#machinesview .status, .single .state {
3847
    font-size: 75%;
3848
}
3849

    
3850
#machinesview-list div.action-indicator {
3851
    margin:0 !important;
3852
    float: none !important;
3853
}
3854

    
3855
.icon div.action-indicator {
3856
    margin-top: 14px;
3857
    margin-right: 4px;
3858
}
3859

    
3860
div.action-indicator {
3861
    width: 15px;
3862
    height: 20px;
3863
    background-repeat: no-repeat;
3864
    background-position: 0 0;
3865
}
3866

    
3867
tbody.machines div.action-indicator {
3868
    position: relative;
3869
    top: -2px;
3870
}
3871
div.state .destroy, tbody.machines .destroy {
3872
    background-image: url("../images/icons/actions/medium/destroy.png");
3873
}
3874
div.state .console, tbody.machines .console {
3875
    background-image: url("../images/icons/actions/medium/console.png");
3876
}
3877
div.state .start, tbody.machines .start {
3878
    background-image: url("../images/icons/actions/medium/start.png");
3879
}
3880
div.state .reboot, tbody.machines .reboot {
3881
    background-image: url("../images/icons/actions/medium/reboot.png");
3882
}
3883
div.state .shutdown, tbody.machines .shutdown {
3884
    background-image: url("../images/icons/actions/medium/shutdown.png");
3885
}
3886

    
3887
h3.overlay-inner-title {
3888
    color: #4085A5;
3889
    font-size: 2em;
3890
}
3891

    
3892
#add-name-container {
3893
    margin-bottom: 10px;   
3894
}
3895

    
3896
.remove-field-trigger, .add-field-trigger {
3897
    cursor: pointer;
3898
}
3899

    
3900
.add-field-trigger img {
3901
    vertical-align: middle;
3902
}
3903

    
3904
.machine-now-building {
3905
    padding-right: 15px !important;
3906
    text-align: justify;
3907
}
3908

    
3909
.sub-text {
3910
    padding-top: 15px;
3911
    padding-right: 15px;
3912
    text-align: justify;
3913
    font-style: italic;
3914
    font-size: 0.8em !important;
3915
}
3916

    
3917
#notification-box a {
3918
    color: #4085A5;
3919
}
3920

    
3921
#notification-box .machine-title img {
3922
    vertical-align: middle;
3923
}
3924

    
3925
#notifiaction-box .password-header {
3926
    margin-bottom: 0 !important;
3927
}
3928

    
3929
#notification-box .password-container a {
3930
    color: #fff;
3931
    text-decoration: underline;
3932
}
3933

    
3934
#notification-box .password-container a:hover {
3935
    background-color: #fff;
3936
    color: #4085A5;
3937
}
3938

    
3939
#notification-box .password-container {
3940
    background: #4085A5;
3941
    border: none;
3942
}
3943

    
3944
#notification-box .password-container .password a {
3945
    font-weight: normal !important;
3946
}
3947

    
3948
#notification-box .cmd {
3949
    color: #fff;
3950
    font-family: monospace;
3951
    font-size: 1.6em;
3952
}
3953

    
3954
.machine-container .separator {
3955
    background-color: #B0D1E0;
3956
}
3957

    
3958
#creation-password-overlay div.password-cont {
3959
    margin: 10px auto;
3960
    padding: 10px;
3961
    border: 2px solid #75B54A;
3962
    background-color: #AADE87;
3963
    color: #447821;
3964
    text-align: left;
3965
    padding-left: 5em;
3966
    position: relative;
3967
}
3968

    
3969
#creation-password-overlay {
3970
    position: relative;
3971
}
3972

    
3973
#creation-password-overlay .form-action {
3974
    position: absolute;
3975
    bottom: 15px;
3976
    right: 13px;
3977
    font-size: 0.8em;
3978
}
3979

    
3980
#creation-password-overlay .password-label {
3981
    float: left;
3982
}
3983

    
3984
#creation-password-overlay .password {
3985
    font-size: 1.5em;
3986
    font-weight: bold;
3987
    letter-spacing: 2px;
3988
    font-family: Georgia, Times, serif;
3989
    margin-right: 5em;
3990
    float: right;
3991
    margin-top: -4px;
3992
}
3993

    
3994
.feedback-form .description {
3995
    margin-bottom: 25px;
3996
}
3997

    
3998
.feedback-form label {
3999
    display: block;
4000
    font-weight: bold;
4001
    margin-bottom: 10px;
4002
    font-size: 0.8em;
4003
}
4004

    
4005
.feedback-form .form-actions {
4006
    border-top: none;
4007
}
4008

    
4009
.nospace {
4010
    padding-top: 0 !important;
4011
    padding-bottom: 0 !important;
4012
}
4013

    
4014
.noborder {
4015
    border-top: none !important;
4016
    border-bottom: none !important;
4017
}
4018

    
4019
.overlay .feedback-form .messages.description {
4020
    padding-bottom:0;
4021
    margin-bottom: 0;
4022
}
4023

    
4024
.feedback-form .messages .error-message {
4025
    color: #f00;
4026
}
4027

    
4028
.feedback-form .messages .success-message {
4029
    color: #8AA87F;
4030
}
4031

    
4032
.feedback-form .feedback-message {
4033
    width: 548px;
4034
    height: 200px;
4035
    border: 1px solid #ddd;
4036
    padding: 5px;
4037
}
4038

    
4039
#feedback-form .empty-error-msg {
4040
    display: none;
4041
}
4042

    
4043
#feedback-form .data-text {
4044
    display: none;
4045
}
4046

    
4047
#feedback-form .message {
4048
    display: none;
4049
}
4050

    
4051
#feedback-form label {
4052
    display: block;
4053
    font-size: 0.85em;
4054
    font-weight: bold;
4055
}
4056

    
4057
#feedback-form label.inline {
4058
    display: inline;
4059
    padding-left: 5px;
4060
}
4061

    
4062
#feedback-form p {
4063
    padding: 1em 0;
4064
    color: #444;
4065
    margin-bottom: 10px;
4066
}
4067

    
4068
#feedback-form .description {
4069
    font-style: italic;
4070
    font-size: 0.9em;
4071
    color: #888;
4072
}
4073

    
4074
#feedback-form .feedback-text {
4075
    width: 98%;
4076
    height: 100px;
4077
    margin-top: 10px;
4078
    margin-bottom: 10px;
4079
}
4080

    
4081
#feedback-form .submit-data {
4082
    display: none;
4083
}
4084

    
4085
#feedback-form .submit, #invform .submit {
4086
    background-color: #4085A5;
4087
    color: #fff;
4088
    border: none;
4089
    padding: 5px 16px;
4090
    cursor: pointer;
4091
    font-size: 1em;
4092
    position: relative;
4093
}
4094

    
4095
#feedback .submit {
4096
    float: right;
4097
    right: 10px;
4098
    margin-top: 10px;
4099
}
4100

    
4101

    
4102
#feedback-form .submit:hover, #invform .submit:hover {
4103
    background-color: #549FC3;
4104
}
4105

    
4106
.feedback-intro {
4107
    padding-right: 15px !important;
4108
    text-align: justify;
4109
}
4110

    
4111
.popup-body .message {
4112
    padding: 20px 5px;
4113
    display: none;
4114
}
4115

    
4116
.popup-body .loading {
4117
    color: #fff;
4118
}
4119

    
4120
.popup-body .success {
4121
    color: #1F921A;
4122
}
4123

    
4124
.popup-body .errormsg {
4125
    color: #E32424;
4126
}
4127

    
4128

    
4129
.close-msg-box {
4130
    display: block;
4131
    margin-top: 10px;
4132
    cursor: pointer;
4133
    color: #4085A5;
4134
    text-decoration: underline;
4135
}
4136

    
4137

    
4138
.console .ip-version-label {
4139
    margin: 0 5px;
4140
}
4141

    
4142
.ipv6-text, .ipv4-text {
4143
    font-size: 0.9em;
4144
}
4145

    
4146
.tooltip {
4147
    background-color: #C4DDE9;
4148
    color: #000;
4149
    font-size: 0.7em;
4150
    padding: 0.2em 0.5em;
4151
    border: 1px solid #888;
4152
    z-index: 50000;
4153
}
4154

    
4155
/*404 and 500 pages*/
4156

    
4157
.error_page {
4158
    position: relative;
4159
    top: 40px;
4160
    padding-bottom: 140px !important;
4161
}
4162

    
4163
.error_page h1 {
4164
    font-weight: normal;
4165
}
4166

    
4167
.error_page .msg_header {
4168
    margin: 0px;
4169
    font-size: 10em;
4170
    position: absolute;
4171
    left: -5px;
4172
    top: 0px;
4173
    color: #4085A5;
4174
    font-family: arial, verdana;
4175
}
4176

    
4177
.error_page p.error_desc {
4178
    color: #fff;
4179
    font-size: 0.8em;
4180
}
4181

    
4182
.error_page {
4183
    padding-right: 50px !important;
4184
    padding-left: 100px !important;
4185
}
4186

    
4187
.error_page .error_content {
4188
    padding-left: 150px;
4189
    padding-top: 97px;
4190
}
4191

    
4192
.error_page .error_content .links, .info_content .links {
4193
    margin-top: 10px;
4194
    margin-left: 20px;
4195
}
4196

    
4197
.error_page .http_error .code {
4198
    letter-spacing: -10px;
4199
    font-size: 9em;
4200
}
4201

    
4202
.error_page .http_error .msg {
4203
    letter-spacing: -1px;
4204
    font-size: 2em;
4205
}
4206

    
4207
.error_page .http_error {
4208
    position: absolute;
4209
    right: 0px;
4210
    bottom: 0px;
4211
    color: #75B3D0;
4212
    line-height: 1em;
4213
}
4214

    
4215
.error_page .error_content a, .info_content .links a {
4216
    color: #4085A5;
4217
    font-weight: bold;
4218
    margin-right: 10px;
4219
    font-size: 0.9em;
4220
}
4221

    
4222
.error_body #container, .info_body #container {
4223
    background-position: right 200px;
4224
}
4225

    
4226
.info_page h1 {
4227
    color: #4085A5;
4228
    font-size: 2em;
4229
    font-weight: normal;
4230
}
4231

    
4232
.info_page p {
4233
    color: #ffffff;
4234
    margin: 1em 0;
4235
}
4236

    
4237
.info_body p a, .error_body p a{
4238
    color: #4085A5;
4239
    text-decoration: underline;
4240
}
4241

    
4242
.error_404 .http_error .code {
4243
    letter-spacing: -7px;
4244
}
4245

    
4246
.network-progress-indicator {
4247
    position: relative;
4248
    display: none;
4249
}
4250

    
4251
.network-progress-indicator img {
4252
    position: absolute;
4253
    bottom: 44px;
4254
    left: 340px;
4255
}
4256

    
4257

    
4258
.single .progress-message {
4259
    margin-top: 90px;
4260
    font-size: 0.6em;
4261
    padding: 0 10px;
4262
    text-align: center;
4263
}
4264

    
4265
/*metadata keys/values*/
4266
.items .tag-item  {
4267
    display: block;
4268
}
4269

    
4270
.single .items .tag-item .key {
4271
    width: 60px;
4272
}
4273

    
4274
.running .scrollable, .terminated .scrollable {
4275
    height: 42px;
4276
}
4277

    
4278
.items .tag-item .key {
4279
    margin-right: 5px;
4280
    width: 30px;
4281
    display: block;
4282
    float: left;
4283
    color: #000;
4284
}
4285

    
4286
.items .tag-item .value {
4287
    color: #444;
4288
}
4289

    
4290
#machinesview-list {
4291
    display: none;
4292
}
4293

    
4294
#machinesview-single {
4295
    position: relative;
4296
    display: none;
4297
}
4298

    
4299
#machinesview-icon {
4300
    display: none;
4301
}
4302

    
4303
#machinesview-icon, #machinesview-single, #machinesview-list {
4304
    
4305
}
4306

    
4307
tbody.machines .spinner {
4308
    margin-top: 0!important;
4309
    margin: 0 !important;
4310
    float: none !important;
4311
}
4312

    
4313
.slider .slider-point {
4314
    width: 4px;
4315
    height: 3px;
4316
    margin-left: 1px;
4317
    background-color: transparent;
4318
    display: block;
4319
    position: absolute;
4320
    z-index: 10;
4321
    bottom: 0px;
4322
}
4323

    
4324
.slider .slider-point-light {
4325
    background-color: transparent;
4326
}
4327

    
4328
.slider-point-text {
4329
    font-size: 0.6em;
4330
    position: absolute;
4331
    top: 4px;
4332
    border-top: 5px solid #C5DEE9;
4333
    padding: 3px;
4334
    color: #4085A5;
4335
    display: block;
4336
    min-width: 6px;
4337
    text-align: middle;
4338
}
4339

    
4340
.slider .handle {
4341
    z-index: 50;
4342
}
4343

    
4344
.modal p.desc {
4345
    margin: 5px 0;
4346
    margin-left: 37px;
4347
    font-size: 0.8em;
4348
    color: #888;
4349
}
4350

    
4351
.api_overlay_template {
4352
    display: none;
4353
}
4354

    
4355
.api_content .password-container .password {
4356
    color: #fff;
4357
    font-size: 1.1em;
4358
}
4359

    
4360
#disks-pane {
4361
    margin-top: 58px;
4362
}
4363

    
4364
span.resend-msg {
4365
    display: block;
4366
    margin-bottom: 5px;
4367
}
4368

    
4369
.success-msg {
4370
    background-color: #5CAD54;
4371
    color: #fff;
4372
    padding: 0.4em;
4373
    border: 1px solid #ddd;
4374
}
4375

    
4376
.error-msg {
4377
    background-color: #800000;
4378
    color: #fff;
4379
    padding: 0.4em;
4380
    border: 1px solid #ddd;
4381
}
4382

    
4383
.success-msg em, .error-msg em {
4384
    font-weight: bold;
4385
    font-style: normal;
4386
    font-size: 0.9em;
4387
}
4388

    
4389
.pagination {
4390
            font-size: 80%;
4391
        }
4392
        
4393
.pagination a {
4394
    text-decoration: none;
4395
        border: solid 1px #AAE;
4396
        color: #15B;
4397
}
4398

    
4399
.pagination a, .pagination span {
4400
    display: block;
4401
    float: left;
4402
    padding: 0.3em 0.5em;
4403
    margin-right: 5px;
4404
        margin-bottom: 5px;
4405
        min-width:1em;
4406
        text-align:center;
4407
}
4408

    
4409
.pagination .current {
4410
    background: #4085A5;
4411
    color: #fff;
4412
        border: solid 1px #AAE;
4413
}
4414

    
4415
.pagination .current.prev, .pagination .current.next{
4416
        color:#999;
4417
        border-color:#999;
4418
        background:#fff;
4419
}
4420

    
4421
table.list-machines .wave {
4422
    float: none !important;
4423
    margin: 0 !important;
4424
}
4425

    
4426
.overlay {
4427
    display: none;
4428
}
4429

    
4430
.overlay .copy-content .clip-copy  {
4431
    right: 10px;
4432
    top:8px;
4433
    border: 1px solid #fff;
4434
}
4435

    
4436
.overlay .copy-content {
4437
    background-color: #387693;
4438
    color: #fff;
4439
    padding: 10px;
4440
    font-size: 1.2em;
4441
    text-align: center;
4442
    position: relative;
4443
}
4444

    
4445
.overlay {
4446
    background-color: #fff;
4447
    border: 2px solid #444;
4448
    text-align: left;
4449

    
4450
    -moz-box-shadow: 0 0 90px 5px #000;
4451
    -webkit-box-shadow: 0 0 90px 5px #000;
4452
    box-shadow: 0 0 90px 5px #000;
4453
    width: 600px;
4454
}
4455

    
4456
.overlay a {
4457
    color: #387693;
4458
}
4459

    
4460
.overlay .overlay-content .description.subinfo {
4461
    margin-bottom:0;
4462
    border-bottom: none;
4463
    padding-bottom:0;
4464
    margin-top: 10px;
4465
    padding-top:10px;
4466
    border-top: 1px solid #64a6c4;
4467
    /*border-top: 1px solid #DBE6EB;*/
4468
    font-size: 0.8em;
4469
}
4470

    
4471
.overlay .overlay-content .important {
4472
    color: #800000;
4473
}
4474

    
4475
.overlay .overlay-content .description {
4476
    color: #444;
4477
    border-bottom: 1px solid #64a6c4;
4478
    margin-bottom: 10px;
4479
    padding-bottom: 10px;
4480
    font-size: 0.9em;
4481
    line-height: 1.6em;
4482
}
4483
.overlay .overlay-content .empty-message {
4484
    margin-bottom: 5px;
4485
}
4486

    
4487
.overlay h3.overlay-header {
4488
    font-size: 0.9em;
4489
    text-align: left;
4490
    padding: 0.8em;
4491
    padding-left: 1em;
4492
    font-weight: normal;
4493
    border-bottom: 1px solid #ddd;
4494
}
4495

    
4496
.overlay h3.overlay-header .title {
4497
    float: left;
4498
}
4499

    
4500
.overlay .container {
4501
    position: relative;
4502
    padding-top: 1em;
4503
    padding: 0.5em;
4504
    background-image: url("../images/popup-bg.png");
4505
    background-repeat: repeat-x;
4506
}
4507

    
4508
.overlay .content {
4509
    background-color: transparent;
4510
    background-image: url("../images/popup-inner-bg.png");
4511
    padding: 1em;
4512
    font-size: 0.8em;
4513
    background-repeat: repeat-x;
4514
    -moz-box-shadow: 0 0 1px 1px #888;
4515
    -webkit-box-shadow: 0 0 1px 1px #888;
4516
    box-shadow: 0 0 1px 1px #888;
4517
}
4518

    
4519
.overlay .message {
4520
}
4521

    
4522
.overlay .actions {
4523
    position: absolute;
4524
    right: 0.75em;
4525
    top: 0.6em;
4526
}
4527

    
4528
.overlay .actions span {
4529
    font-size: 0.8em;
4530
    color: #fff;
4531
    cursor: pointer;
4532
    margin-left: 10px;
4533
    display: block;
4534
    float: left;
4535
    background-color: #4085A5;
4536
    padding: 0.2em 0.4em;
4537
}
4538

    
4539
.overlay-error .error-more-details {
4540
    margin-top: 5px;
4541
    max-height: 210px;
4542
    overflow: auto;
4543
}
4544

    
4545
.overlay-error .key.details.expand {
4546
    background-image: url("../images/plus-8.png");
4547
}
4548

    
4549
.overlay-error .key.details {
4550
    background-color: #5189A3;
4551
    cursor: pointer;
4552
    background-image: url("../images/minus-8.png");
4553
    background-repeat: no-repeat;
4554
    background-position: 545px;
4555
}
4556

    
4557
.overlay-error .container {
4558
    padding-top: 1.9em;
4559
}
4560

    
4561
.overlay-error .error-details {
4562
    font-size: 0.8em;
4563
    margin-top: 10px;
4564
}
4565

    
4566
.overlay-error .error-details anonymous {
4567
    display: block;
4568
    margin-top: 10px;
4569
}
4570

    
4571
.overlay-error h3.overlay-header {
4572
    background-color: #800000;
4573
    color: #fff;
4574
}
4575

    
4576
.overlay-error.non-critical h3.overlay-header {
4577
    background-color: #987249;
4578
}
4579

    
4580
.overlay-error span.key {
4581
    font-weight: normal;
4582
    display: block;
4583
    margin-top: 0.5em;
4584
    background-color: #74AEC9;
4585
    color: #fff;
4586
    padding: 0.4em;
4587
    font-size: 0.8em;
4588
    font-weight: bold;
4589
}
4590

    
4591
.overlay-error .indicator {
4592
    background-color: #880000;
4593
    color: #fff;
4594
    padding: 4px;
4595
    display: block;
4596
    float: left;
4597
    border: 1px solid #444;
4598
}
4599

    
4600
.overlay-error .nav-btn:hover {
4601
    
4602
}
4603

    
4604
.overlay-error .nav-btn {
4605
    margin-left: 5px;
4606
    color: #fff;
4607
    display: block;
4608
    float: left;
4609
    padding: 4px;
4610
    background-color: #AAA;
4611
    border: 1px solid #444;
4612
}
4613

    
4614
.overlay-error .error-nav {
4615
    position: absolute;
4616
    right: 0px;
4617
    bottom: -25px;
4618
    font-size: 0.8em;
4619
}
4620

    
4621
.overlay-error span.value, .overlay-error div.value {
4622
    padding: 0.4em;
4623
    display: block;
4624
    margin-bottom: 0.3em;
4625
}
4626

    
4627
.overlay h3 .closeme {
4628
    float: right;
4629
    font-size: 0.7em;
4630
    margin-top: 0.2em;
4631
    cursor: pointer;
4632
}
4633

    
4634
.overlay .overlay-header .subtitle {
4635
    display: block;
4636
    font-size: 0.8em;
4637
    color: #ddd;
4638
}
4639

    
4640
.overlay .overlay-header .subtitle img {
4641
    vertical-align: middle;
4642
    margin-left: 10px;
4643
    margin-bottom: 2px;
4644
}
4645

    
4646
.overlay-info .content {
4647
    background-repeat: no-repeat;
4648
    background-position: 110% 110%;
4649
    background-color: rgba(255,255,255,0.6)
4650
}
4651

    
4652
.overlay-info .overlay-header {
4653
    background-color: #4085A5;
4654
}
4655

    
4656
.overlay-info .overlay-header .title {
4657
    color: #fff;
4658
}
4659

    
4660
.overlay-info .overlay-header .closeme {
4661
    color: #fff;
4662
}
4663

    
4664
#loading-view {
4665
    width: 600px;
4666
    margin: 0 auto;
4667
    padding: 20px 0;
4668
    font-size: 0.8em;
4669
}
4670

    
4671
#loading-view .header span {
4672
    font-weight: bold;
4673
    color: #4085A5;
4674
}
4675

    
4676
#loading-view .info {
4677
    color: #ddd;
4678
}
4679

    
4680
.options-list {
4681
    margin-top: 0.5em;
4682
    font-size: 0.8em;
4683
}
4684

    
4685
.options-list.five li {
4686
    float: left;
4687
    display: block;
4688
    width: 20%;
4689
    margin-bottom: 5px;
4690
}
4691

    
4692
.options-list.five li:nth-child(5n) .options-object-cont {
4693
    margin-right: 0;
4694
}
4695

    
4696
.options-object-cont input {
4697
    border: 1px solid #aaa;
4698
    width: 92px;
4699
    padding: 0;
4700
    margin: 0;
4701
    margin-top:3px;
4702
    padding: 2px;
4703
}
4704

    
4705
.options-list.three li {
4706
    float: left;
4707
    display: block;
4708
    width: 33%;
4709
    margin-bottom: 5px;
4710
}
4711

    
4712
.meta-list .options-list li.options-object.create .options-object-cont {
4713
    background-image: url("../images/option-action-add.png");
4714
    background-repeat: no-repeat;
4715
    background-position: 90px 5px;
4716
}
4717

    
4718
.meta-list .options-list li .options-object-cont .option-action,
4719
.meta-list .options-list li.options-object.create {
4720
    cursor: pointer !important;
4721
}
4722

    
4723
.meta-list .options-list li .options-object-cont {
4724
    cursor: inherit;
4725
}
4726

    
4727
.options-list li .options-object-cont {
4728
    padding: 5px;
4729
    margin-right: 4px;
4730
    border: 1px solid #A6D1E6;
4731
    cursor: pointer;
4732
    min-height: 35px;
4733
    position: relative;
4734
}
4735

    
4736
.options-list.three li:nth-child(3n) .options-object-cont {
4737
    margin-right: 0;
4738
}
4739

    
4740
.options-list li.selected .options-object-cont {
4741
    background-color: #efefef;
4742
    border: 2px solid #4085A5;
4743
    padding: 4px;
4744
}
4745

    
4746
.options-list li.selected .options-object-cont .title {
4747
}
4748

    
4749
.options-list li.options-object .title {
4750
    display: block;
4751
    color: #FF7F2A;
4752
    margin-bottom: 2px;
4753
}
4754

    
4755
.options-list li .option-action {
4756
    display: none;
4757
    position: absolute;
4758
    background-repeat: no-repeat;
4759
}
4760

    
4761
.options-list.five li.editing {
4762
    width: 40%;
4763
}
4764

    
4765
.options-list.five li.editing .value {
4766
    display: none;
4767
}
4768

    
4769
.options-list li .remove {
4770
    background-image: url("../images/option-action-remove.png");
4771
    width:10px;
4772
    height:10px;
4773
    right:5px;
4774
    top: 5px;
4775
}
4776

    
4777
.options-list li .edit {
4778
    background-image: url("../images/option-action-edit.png");
4779
    width:10px;
4780
    height:10px;
4781
    right:5px;
4782
    bottom: 8px;
4783
}
4784

    
4785
.options-list li:hover .option-action  {
4786
    display: block;
4787
}
4788

    
4789
.options-list li.options-object .value {
4790
    color: #4085A5;
4791
    margin-top: 5px;
4792
    display: block;
4793
}
4794

    
4795
.options-list li.selected.options-object .value {
4796
}
4797

    
4798
.options-list li .options-object-cont:hover {
4799
    background-color: #fff;
4800
}
4801

    
4802
.options-list li.selected .options-object-cont:hover {
4803
    background-color: #fff;
4804
}
4805

    
4806
.options-list li img {
4807
    float: left;
4808
    margin:2px;
4809
    margin-right: 10px;
4810
    padding-bottom:10px;
4811
}
4812

    
4813
#network-vms-select-content li.options-object .value {
4814
    margin-top: 10px;
4815
    margin-left: 30px;
4816
}
4817

    
4818
#network-vms-select-content li.options-object:hover .options-object-cont,
4819
#network-vms-select-content li.options-object .options-object-cont {
4820
    background-image: url("../images/option-action-add-dark.png");
4821
    background-repeat: no-repeat;
4822
    background-position: 160px 28px;
4823
}
4824

    
4825
#network-vms-select-content li.selected:hover .options-object-cont,
4826
#network-vms-select-content li.selected .options-object-cont {
4827
    background-image: url("../images/option-action-remove.png") !important;
4828
}
4829

    
4830
#metadata-overlay-content .view .value {
4831
    margin-top: 10px;
4832
}
4833

    
4834
#metadata-overlay-content {
4835
    position: relative;
4836
}
4837

    
4838
.vm-meta .editor .predefined .predefined-meta-key:hover {
4839
    background-color: #4e8eac;
4840
    color: #fff;
4841
}
4842

    
4843
.vm-meta .editor .predefined .predefined-meta-key {
4844
    float: left;
4845
    margin-right: 5px;
4846
    padding: 4px;
4847
    display: block;
4848
    cursor: pointer;
4849
}
4850

    
4851
.vm-meta .editor .predefined {
4852
    background-color: #A6D1E6;
4853
    font-size: 0.9em;
4854
    border-top: 1px solid #ddd;
4855
}
4856

    
4857
.vm-meta .editor input {
4858
}
4859
.vm-meta .editor {
4860
    margin-bottom: 10px;
4861
}
4862

    
4863
.vm-meta .editor .form-actions .form-action {
4864
    min-width: 50px;
4865
}
4866

    
4867
.vm-meta .editor .form-field input.meta-key {
4868
    width: 90px;
4869
}
4870

    
4871
.vm-meta .form-field {
4872
    float: left;
4873
}
4874

    
4875
.vm-meta .form-actions .form-action {
4876
    float: left;
4877
    margin-right: 10px;
4878
    height: 11px;
4879
}
4880

    
4881
.vm-meta .editor .form-actions .cancel {
4882
    margin-right: 0;
4883
}
4884

    
4885
.vm-meta .editor .form-actions {
4886
    float: right;
4887
    margin:0;
4888
    padding:0;
4889
    margin-left: 15px;
4890
    margin-top: 0px;
4891
}
4892

    
4893
.vm-meta .editor {
4894
    background-color: rgba(64, 133, 165, 0.898) !important;
4895
    background-color: #649DB8;
4896
    font-size:0.9em;
4897
}
4898

    
4899
.vm-meta .meta-key-title {
4900
    font-size: 1.3em;
4901
    color: #fff;
4902
    margin-bottom: 10px;
4903
    display: none;
4904
    float: left;
4905
}
4906

    
4907
.vm-meta .editor-content {
4908
    padding: 10px;
4909
}
4910

    
4911
.vm-meta .inner-mask {
4912
    background-color: #fff;
4913
    opacity:0.6;
4914
    position: absolute;
4915
    top:0;
4916
    left:0;
4917
}
4918

    
4919
.vm-meta .editor label {
4920
    float: left;
4921
    color: #fff;
4922
    margin-right: 2px;
4923
    padding-top:4px;
4924
    font-size: 0.9em;
4925
}
4926

    
4927
.vm-meta .editor input {
4928
    border: none;
4929
    width: 170px;
4930
    margin-left: 10px;
4931
    font-size: 0.9em;
4932
    padding: 4px;
4933
}
4934

    
4935
.vm-meta li.create .options-object-cont {
4936
    background-color: #B3C9AD ;
4937
    border-color: #788774;
4938
}
4939
.vm-meta li.create .options-object-cont .value,
4940
.vm-meta li.create .options-object-cont .title {
4941
    color: #fff;
4942
}
4943

    
4944
#createvm-overlay-content {
4945
    padding: 0;
4946
}
4947

    
4948
.overlay-createvm .container {
4949
    width: 584px !important;
4950
}
4951

    
4952
.create-vm .header-step.current {
4953
    font-weight: bold;
4954
}
4955

    
4956
.create-vm .create-step-cont {
4957
    min-height: 240px;
4958
}
4959
.create-vm .create-controls {
4960
    padding: 10px;
4961
}
4962

    
4963
.create-vm ul li {
4964
    cursor: pointer;
4965
    padding: 4px;
4966
}
4967

    
4968
.create-vm ul li.selected {
4969
    background-color: #aaa;
4970
}
4971

    
4972
.cont-toggler {
4973
    background-image: url("../images/down-arrow.png");
4974
    background-position: right;
4975
    background-repeat: no-repeat;
4976
    background-color: #A1C8DB;
4977
    display: inline-block;
4978
    border-right: 6px solid #A1C8DB;
4979
    padding:2px;
4980
    padding-right: 14px;
4981
    padding-left:0;
4982
    cursor: pointer;
4983
    color: #fff;
4984
    font-size: 0.9em;
4985
}
4986

    
4987
.cont-toggler .label {
4988
    background-color: #98BDCF;
4989
    padding: 2px;
4990
    padding-left: 5px;
4991
    padding-right: 5px;
4992
}
4993

    
4994
.cont-toggler.open {
4995
    background-color: #98BDCF;
4996
    border-color: #98BDCF;
4997
    background-image: url("../images/up-arrow.png");
4998
}
4999

    
5000
.cont-toggler.open .label {
5001
    background-color: #4085A5;
5002
}
5003

    
5004
.overlay .form label {
5005
    font-color: #444;
5006
    margin-right: 10px;
5007
}
5008

    
5009
.form-field.error label {
5010
    color: #ff0000;
5011
    text-decoration: underline;
5012
}
5013

    
5014
.form-field input {
5015
    border: 1px solid #aaa;
5016
    width: 200px;
5017
    padding: 3px;
5018
}
5019

    
5020
.form-actions {
5021
    margin-top: 5px;
5022
    padding-top:5px;
5023
    border-top: 1px solid #64a6c4;
5024
    font-size: 0.8em;
5025
}
5026

    
5027
.form-actions.plain {
5028
    margin-top: 0px;
5029
    padding-top:0px;
5030
    border-top: 0px;
5031
}
5032

    
5033
.form-action {
5034
    float: right;
5035
    min-width: 140px;
5036
    background-color: #FF7F2A;
5037
    border: 1px solid #FF7F2A;
5038
    text-align: center;
5039
    color: #FFFFFF;
5040
    cursor: pointer;
5041
    padding: 4px;
5042
}
5043

    
5044
.form-action:hover {
5045
    background-color: #FF9955;
5046
    color: #FFF;
5047
}
5048

    
5049
.form-action.prev,
5050
.form-action.cancel {
5051
    background-color: #800;
5052
    border: 1px solid #800;
5053
    float: left;
5054
}
5055

    
5056
.form-action.prev:hover,
5057
.form-action.cancel:hover {
5058
    background-color: #CC0000;
5059
    color: #fff;
5060
}
5061

    
5062
.form-action.next,
5063
.form-action.ok {
5064
    background-color: #080;
5065
    border: 1px solid #080;
5066
}
5067

    
5068
.form-action.next:hover,
5069
.form-action.ok:hover {
5070
    background-color: #00aa00;
5071
    color: #fff;
5072
}
5073

    
5074
.form-action .create,
5075
.form-action .submit {
5076

    
5077
}
5078

    
5079
.form-action.in-progress, button.in-progress {
5080
    background-image: url("../images/icons/indicators/medium/horizontal-progress.gif");
5081
    background-repeat: no-repeat;
5082
    background-position: center center;
5083
    color: transparent;
5084
}
5085

    
5086
#createvm-overlay-content {
5087
    padding: 0;
5088
}
5089

    
5090
.create-vm .image-details.selected .size {
5091

    
5092
}
5093

    
5094
.create-vm .image-details .show-details:hover {
5095
    color: #aaa !important; 
5096
}
5097
.create-vm .image-details.selected .show-details:hover {
5098
    color: #fff !important; 
5099
}
5100

    
5101
.create-vm .image-details.selected .show-details,
5102
.create-vm .image-details.selected .size {
5103
    color: #eee;
5104
}
5105

    
5106
.create-vm .image-details.selected span.owner {
5107
    color: #fff;
5108
}
5109

    
5110

    
5111
.create-vm .image-details p {
5112
    font-size: 0.8em;
5113
    padding-left: 27px;
5114
    display:block;
5115
}
5116

    
5117
.create-vm .image-details span.owner {
5118
    display: block;
5119
    font-size: 0.9em;
5120
    float: right;
5121
    color: #FF7F2A;
5122
    position: absolute;
5123
    top: 5px;
5124
    right: 5px;
5125
}
5126

    
5127
.create-vm .select-image .show-details {
5128
    display: none;
5129
    font-size: 0.8em;
5130
    text-decoration: underline;
5131
    color: #000;
5132
    position: absolute;
5133
    bottom: 5px;
5134
    right: 5px;
5135
}
5136

    
5137
.create-vm .image-details .size {
5138
    margin-top: 2px;
5139
    font-size: 0.8em;
5140
    color: #aaa;
5141
    margin-left: 10px;
5142
}
5143

    
5144
.create-vm .step-cont {
5145
    margin: 15px;
5146
}
5147

    
5148
.create-vm .create-step-cont {
5149
    min-height: 250px;
5150
    float: left;
5151
    width: 584px;
5152
}
5153

    
5154
.create-vm .create-controls {
5155
    padding: 10px;
5156
    border-top: 1px solid #ddd;
5157
}
5158

    
5159
.create-vm .empty {
5160
    font-size: 0.8em;
5161
    color: #444;
5162
}
5163

    
5164
.create-vm h4 {
5165
    color: #5CA1C0;
5166
    margin-bottom: 0.5em;
5167
    font-family: arial;
5168
}
5169
.create-vm ul li {
5170
    cursor: pointer;
5171
    padding: 4px;
5172
    font-size: 0.9em;
5173
}
5174

    
5175
.create-vm .create-step-cont li.ssh-key-option.selected,
5176
.create-vm ul li.selected {
5177
    background-color: #FF7F2A;
5178
    background-image:linear-gradient(top, #FF9955, #E88B4D);
5179
    background-image:-webkit-linear-gradient(top, #FF9955, #E88B4D);
5180
    background-image:-o-linear-gradient(top, #FF9955, #E88B4D);
5181
    background-image:-moz-linear-gradient(top, #FF9955, #E88B4D);
5182
    color: #fff;
5183
}
5184

    
5185
.create-vm .images-list-cont.loading .loading-indicator {
5186
    display: block !important;
5187
}
5188

    
5189
.create-vm .images-list-cont .loading-indicator {
5190
    display: none;
5191
    position: absolute;
5192
    right: -13px;
5193
    top: 2px;
5194
    width: 30px;
5195
    height: 10px;
5196
    background-repeat: no-repeat;
5197
    background-image: url("../images/icons/indicators/medium/progress.gif");
5198
}
5199

    
5200
.create-vm .images-list-cont h4 {
5201
    position: relative;
5202
}
5203

    
5204
.create-vm .images-list-cont {
5205
    width: 40%;
5206
    float: left;
5207
    padding-left: 3%;
5208
    padding-right: 3%;
5209
}
5210

    
5211
.create-vm li p.desc {
5212
    font-size: 0.9em;
5213
}
5214

    
5215
.create-vm p.desc.warning {
5216
    color: #880000;
5217
}
5218

    
5219
.create-vm p.desc.empty {
5220
    color: #000;
5221
}
5222

    
5223
.create-vm p.desc {
5224
    font-size: 0.8em;
5225
    color: #888;
5226
    margin-bottom: 10px;
5227
}
5228

    
5229
.create-vm li.role .values .val:hover {
5230
    background-color: #eee;
5231
}
5232
.create-vm li.role .values .val.selected,  .create-vm li.role .values .val.selected:hover {
5233
    color: #fff;
5234
    background-color: #FF9955;
5235
}
5236

    
5237
.create-vm .images-filter-cont, .create-vm .flavors-predefined-cont {
5238
    width: 18%;
5239
    padding-right: 4%;
5240
    float:left;
5241
    border-right: 1px solid #A1C8DB;
5242
    overflow: auto;
5243
}
5244

    
5245
.create-vm .flavor-options-cont {
5246
    width: 74%;
5247
    float: left;
5248
    margin-left: 20px;
5249
}
5250

    
5251
.create-vm .flavor-options-cont .flavor-options li:hover {
5252
    background-image:-webkit-linear-gradient(top, #E8F4FA, #D1E7F0);
5253
    background-image:-o-linear-gradient(top, #E8F4FA, #D1E7F0);
5254
    background-image:-moz-linear-gradient(top, #E8F4FA, #D1E7F0);
5255
    background-image:linear-gradient(top, #E8F4FA, #D1E7F0);
5256
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E8F4FA', endColorstr='#D1E7F0', GradientType=0);
5257
}
5258

    
5259
.create-vm .flavor-options-cont .flavor-options li.disabled * {
5260
    color: #eee !important;
5261
}
5262

    
5263
.create-vm .flavor-options-cont .flavor-options li.disabled {
5264
    background-image:linear-gradient(top, #aaa, #ddd);
5265
    background-image:-webkit-linear-gradient(top, #aaa, #ddd);
5266
    background-image:-o-linear-gradient(top, #aaa, #ddd);
5267
    background-image:-moz-linear-gradient(top, #aaa, #ddd);
5268
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaaaaa', endColorstr='#dddddd', GradientType=0);
5269
}
5270

    
5271
.create-vm .flavor-options-cont .flavor-options li.selected {
5272
    background-color: #FF9955;
5273
    background-image:linear-gradient(top, #FF9955, #E88B4D);
5274
    background-image:-webkit-linear-gradient(top, #FF9955, #E88B4D);
5275
    background-image:-o-linear-gradient(top, #FF9955, #E88B4D);
5276
    background-image:-moz-linear-gradient(top, #FF9955, #E88B4D);
5277
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9955', endColorstr='#E88B4D', GradientType=0);
5278
    border: 1px solid #C97943;
5279
}
5280

    
5281
.create-vm .predefined-list li.disabled {
5282
    color: #ddd !important;
5283
}
5284

    
5285
.create-vm .flavor-options-cont .flavor-options li {
5286
    display: block;
5287
    float: left;
5288
    margin-right: 10px;
5289
    margin-bottom: 9px;
5290
    padding: 9px 14px;
5291
    border: 1px solid #aaa;
5292
    background-image:-webkit-linear-gradient(top, #D1E7F0, #E8F4FA);
5293
    background-image:-o-linear-gradient(top, #D1E7F0, #E8F4FA);
5294
    background-image:-moz-linear-gradient(top, #D1E7F0, #E8F4FA);
5295
    background-image:linear-gradient(top, #D1E7F0, #E8F4FA);
5296
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D1E7F0', endColorstr='#E8F4FA', GradientType=0);
5297
}
5298

    
5299
.create-vm .flavor-options-cont .flavor-options {
5300
    margin-bottom: 2px;
5301
}
5302

    
5303

    
5304
.create-vm .flavor-options .metric {
5305
    font-size: 0.8em;
5306
    margin-left: 2px;
5307
}
5308

    
5309
.create-vm .flavor-options span.title {
5310
    color: #444;
5311
}
5312

    
5313
.create-vm .flavor-options span.desc {
5314
    display: block;
5315
    color: #aaa;
5316
    font-weight: normal;
5317
    font-size: 0.8em;
5318
    float: right;
5319
    margin-top: 4px;
5320
}
5321

    
5322
.disktip {
5323
    padding: 4px;
5324
    top: 20px;
5325
}
5326

    
5327
.create-vm .flavor-options .flavors-disk-template-list {
5328
    position: relative;
5329
}
5330

    
5331
.create-vm .flavor-options .disk_template.option {
5332
    z-index: 10;
5333
    min-width: 50px;
5334
    text-align: center;
5335
}
5336

    
5337
/*0 position is -470px*/
5338
.create-vm .flavor-options .disk-template-description {
5339
    font-size: 0.8em;
5340
    color: #444;
5341
    background-image: url("../images/horizontal-pointer.png");
5342
    background-repeat: repeat-x;
5343
    background-position: -470px 0;
5344
    padding-top: 15px;
5345
    margin-top: -10px;
5346
    font-style: italic;
5347
    display:block;
5348
    overflow: auto;
5349
    padding-bottom: 0px;
5350
    margin-bottom: 7px;
5351
    width: 100%;
5352
}
5353

    
5354
.create-vm .flavor-options .disk_template.option .description {
5355
    display: none;
5356
    position: absolute;
5357
    bottom: -20px;
5358
    left:0;
5359
    color: #888;
5360
    font-style: italic;
5361
    display: block;
5362
    background-color: #fff;
5363
    width: 100%;
5364
    text-align: left;
5365
    z-index: 0;
5366
    border-top: 1px solid #ddd;
5367
    padding-top: 3px;
5368
    display: none;
5369
}
5370

    
5371
.create-vm .flavor-options .selected .value {
5372
    color: #FFF;
5373
}
5374

    
5375
.create-vm .flavor-options .value {
5376
    font-weight: bold;
5377
    color: #5CA1C0;
5378
}
5379

    
5380
.create-vm .flavor-options-cont h4 {
5381
    border-bottom: 1px solid #A1C8DB;
5382
    padding-bottom: 5px;
5383
}
5384

    
5385
.create-vm .images-info-cont {
5386
    width: 28%;
5387
    padding-left: 3%;
5388
    float: left;
5389
    border-left: 1px solid #A1C8DB;
5390
}
5391

    
5392
.create-vm .select-image.wide .show-details {
5393
    display: inline;
5394
}
5395

    
5396
.create-vm .select-image .images-info-cont .hide {
5397
    display: none;
5398
}
5399

    
5400
.create-vm .select-image.wide .images-info-cont .hide {
5401
    display: block;
5402
    float: right;
5403
    position: absolute;
5404
    right: 10px;
5405
    top: 10px;
5406
    font-size: 0.8em;
5407
    text-decoration: underline;
5408
    color: #5CA1C0;
5409
    cursor: pointer;
5410
}
5411

    
5412
.create-vm .select-image.wide .images-list-cont {
5413
    width: 74%;
5414
    padding-right: 0;
5415
}
5416

    
5417
.create-vm .select-image.wide .images-info-cont .description .title {
5418
    display: none;
5419
    float: none;
5420
}
5421

    
5422
.create-vm .select-image.wide .images-info-cont .description p {
5423
    background-color: #fff;
5424
    border: 1px solid #ddd;
5425
    padding: 10px;
5426
    float: none;
5427
}
5428

    
5429
.create-vm .select-image.wide .selected .size {
5430
    color: #FFF !important;
5431
}
5432

    
5433
.create-vm .select-image.wide .image-details .size {
5434
    color: #5CA1C0;
5435
    position: absolute;
5436
    top: 5px;
5437
}
5438

    
5439
.create-vm .select-image.wide .images-info-cont h3 {
5440
    color: #5CA1C0;
5441
    margin: 10px 0;
5442
    margin-top: 5px;
5443
    text-align: left;
5444
    font-size: 0.9em;
5445
}
5446

    
5447
.create-vm .select-image.wide .images-info-cont .description p {
5448
    height: 50px;
5449
}
5450

    
5451
.create-vm .select-image.wide .images-info-cont .description {
5452
    width: 100% !important;
5453
    float: none !important;
5454
    background-color: transparent !important;
5455
    padding: 0 !important;
5456
    font-size: 1.1em;
5457
}
5458
.create-vm .select-image.wide .images-info-cont .extra-details {
5459
    height: 160px;
5460
    overflow-y: scroll;
5461
    padding-right: 15px;
5462
}
5463

    
5464
.create-vm .select-image.wide .images-info-cont .extra-details .image-detail {
5465
    padding: 0px;
5466
    background-color: transparent;
5467
    margin-bottom: 4px;
5468
}
5469

    
5470
.create-vm .select-image.wide .images-info-cont .extra-details .title {
5471
    float: left;
5472
    display: block;
5473
    width: 39%;
5474
    padding: 1%;
5475
    background-color: #5CA1C0;
5476
    color: #fff;
5477
    border: 1px solid #4F8DAA;
5478
    font-size: 0.8em;
5479
}
5480

    
5481
.create-vm .select-image.wide .images-info-cont .extra-details .value {
5482
    float: right;
5483
    display: block;
5484
    width: 55%;
5485
    padding: 1%;
5486
    border: none;
5487
    background-color: #FFF;
5488
    color: #444;
5489
    border: 1px solid #ddd;
5490
    margin-bottom: 0px;
5491
    font-size: 0.8em;
5492
}
5493

    
5494
.create-vm .select-image.wide .images-info-cont .image-detail {
5495
}
5496

    
5497
.create-vm .select-image.wide ul.images-list {
5498
    height: 310px;
5499
    overflow-y: scroll;
5500
    padding-right: 3%;
5501
}
5502

    
5503
.create-vm .select-image.wide .images-info-cont {
5504
    position: absolute;
5505
    width: 88%;
5506
    background-color: #DAE9F0;
5507
    padding: 2%;
5508
    border-left: none;
5509
    height: 320px;
5510
    box-shadow: 0px 0px 2px #aaa;
5511
    -moz-box-shadow: 0px 0px 2px #aaa;
5512
    -webkit-box-shadow: 0px 0px 2px #aaa;
5513
    display: none;
5514
}
5515

    
5516

    
5517
.create-vm .images-info-cont h4, .create-vm .create-step-cont .param h4{
5518
    color: #FF9955;
5519
    margin-bottom: 1em;
5520
    font-size: 1.2em;
5521
}
5522

    
5523
.create-vm .images-info-cont span.title {
5524
    color: #4085A5;
5525
    display: block;
5526
    margin-bottom: 2px;
5527
    font-size: 0.8em;
5528
}
5529

    
5530
.create-vm .type-filter li {
5531
    font-size: 0.8em;
5532
    /*font-weight: bold;*/
5533
    padding: 4px;
5534
    margin-bottom: 0px;
5535
    color: #FF7F2A;
5536
}
5537

    
5538
.create-vm .images-list li {
5539
    min-height: 30px;
5540
}
5541
.create-vm .images-list .image-details:hover {
5542
    background-color: #eee;
5543
}
5544

    
5545
.create-vm .images-list .image-details.selected:hover {
5546
    background-color: #FF7F2A;
5547
}
5548

    
5549
.create-vm .images-list .image-details.selected {
5550
    /*font-weight: bold;*/
5551
}
5552

    
5553
.create-vm .images-list .image-details {
5554
    padding: 6px;
5555
    margin-bottom:1px;
5556
    position: relative;
5557
}
5558

    
5559
.create-vm .images-list .image-details img {
5560
    vertical-align: middle;
5561
    margin-right: 10px;
5562
}
5563

    
5564
.create-vm .images-info-cont .image-detail:last-child p {
5565
    border-bottom: none;
5566
}
5567

    
5568
.create-vm .images-info-cont h4 img {
5569
    vertical-align: middle;
5570
    margin-right: 7px;
5571
    margin-bottom: 5px;
5572
}
5573

    
5574
.create-vm .images-info-cont .description p {
5575
    font-size: 0.8em;
5576
}
5577

    
5578
.create-vm .images-info-cont p {
5579
    margin-bottom: 7px;
5580
    font-size: 0.9em;
5581
    border-bottom: 1px solid #A1C8DB;
5582
    padding-bottom: 7px;
5583
}
5584

    
5585
.create-vm .step-header {
5586
    padding-bottom:0;
5587
    position: relative;
5588
}
5589

    
5590
.create-vm .step-header .header-step .info span.subtitle {
5591
    font-size: 1.2em;
5592
    color: #fff;
5593
    font-weight: bold;
5594
}
5595

    
5596
.create-vm .step-header .header-step .info span {
5597
    float: none;
5598
    text-align: right;
5599
}
5600

    
5601
.create-vm .step-header .header-step .info {
5602
    position: absolute;
5603
    right: 15px;
5604
    top: 20px;
5605
    font-size: 0.8em;
5606
}
5607

    
5608
.create-vm .step-header .header-step span {
5609
    float: left;
5610
    display: block;
5611
}
5612

    
5613
.create-vm .steps-container {
5614
    width: 2000em;
5615
}
5616

    
5617
.create-vm .step-header .header-step .title {
5618
    margin-top: 20px;
5619
    font-size: 1em;
5620
    margin-left: 10px;
5621
}
5622

    
5623
#createvm-overlay-content {
5624
    width: 584px;
5625
    overflow: hidden;
5626
}
5627

    
5628
.create-vm .steps-history .steps-history-cont.current .title {
5629
    display: block;
5630
    top: 23px;
5631
    left: 43px;
5632
    font-size: 1.2em;
5633
    color: #ffffff;
5634
    font-weight: bold;
5635
    font-family: 'Ubuntu', sans-serif !important;
5636
}
5637

    
5638
.create-vm .steps-history .steps-history-cont.current .subnum {
5639
    display: none;
5640
    float: none;
5641
    font-size: 0.9em;
5642
    font-family: 'Ubuntu', sans-serif  !important;
5643
}
5644

    
5645
.create-vm .steps-history .steps-history-cont.current .subtitle,
5646
.create-vm .steps-history .steps-history-cont.current .description {
5647
    font-family: 'Ubuntu', sans-serif  !important;
5648
}
5649

    
5650
.create-vm .steps-history .steps-history-cont.current .info {
5651
    display: block;
5652
    font-family: 'Ubuntu', sans-serif !important;
5653
}
5654

    
5655
.create-vm .steps-history .steps-history-cont.completed .title,
5656
.create-vm .steps-history .steps-history-cont.completed .num {
5657
    color: #A1C8DB;
5658
}
5659

    
5660
.create-vm .steps-history .steps-history-cont.completed {
5661
    background-color: #4085A5;
5662
    color: #fff;
5663
    cursor: pointer;
5664
}
5665

    
5666
.create-vm .steps-history .steps-history-cont.completed .steps-history-step {
5667
    background-image: url("../images/check.png");
5668
}
5669

    
5670
.create-vm .steps-history .steps-history-cont.current .steps-history-step {
5671
    width: 320px;
5672
}
5673

    
5674
.create-vm .steps-history .steps-history-cont.current .num {
5675
    color: #fff;
5676
}
5677

    
5678
.create-vm .steps-history .steps-history-cont.current .info {
5679
    color: #4085A5;
5680
    font-size: 0.8em;
5681
}
5682

    
5683
.create-vm .steps-history .steps-history-cont.current {
5684
    background-color: #A1C8DB;
5685
    color: #fff;
5686
    width: 428px;
5687
}
5688

    
5689
.create-vm .steps-history-step {
5690
    padding: 4px;
5691
    padding-left: 7px;
5692
    font-size: 1em;
5693
    font-family: 'Ubuntu', sans-serif  !important;
5694
    margin-right: 5px;
5695
    padding-top: 12px;
5696
    background-position: right 30px;
5697
    background-image: none;
5698
    background-repeat: no-repeat;
5699
}
5700

    
5701
.create-vm .steps-history {
5702
    background-color: #4085A5;
5703
}
5704

    
5705
.create-vm .steps-history .steps-history-cont.last {
5706
    border-right: none;
5707
}
5708

    
5709
.create-vm .steps-history .steps-history-cont .num {
5710
    margin-left: 5px;
5711
    margin-top: -10px;
5712
    padding-bottom: 10px;
5713
}
5714

    
5715
.create-vm .steps-history .steps-history-cont .title {
5716
    display: none;
5717
    position: absolute;
5718
    bottom: 0px;
5719
    text-align: center;
5720
    padding-bottom: 2px;
5721
    left:0;
5722
    width: 55px;
5723
    margin-left:0;
5724
    margin-top:0;
5725
    font-size: 0.8em;
5726
}
5727

    
5728
.create-vm .steps-history .steps-history-cont .subnum,
5729
.create-vm .steps-history .steps-history-cont .info {
5730
    display: none;
5731
}
5732

    
5733
.create-vm .steps-history .steps-history-cont {
5734
    height: 70px;
5735
    width: 51px;
5736
    float: left;
5737
    color: #fff;
5738
    border-right: 1px solid #A1C8DB;
5739
    color: #A1C8DB;
5740
    background-color: #4085A5;
5741
    background-position: center right;
5742
    background-image: none;
5743
    background-repeat: no-repeat;
5744

    
5745
    -webkit-transition: background-color .15s ease-in;
5746
    -o-transition: background-color .15s ease-in;
5747
    -moz-transition: background-color .15s ease-in;
5748
    transition: background-color .15s ease-in;
5749

    
5750
    border-bottom: 1px solid #aaa;
5751
}
5752

    
5753
.create-vm .step-header .header-step .num {
5754
    color: #225871;
5755
    font-size: 4em;
5756
    margin-bottom: -5px;
5757
    font-family: 'Ubuntu', sans-serif;
5758
    font-weight: normal !important;
5759
}
5760

    
5761
.create-vm .step-header .header-step {
5762
    color: #;
5763
    margin-bottom: -6px;
5764
    width: 25%;
5765
    padding-left: 0%;
5766
    display: block;
5767
    float: left;
5768
}
5769

    
5770
.create-vm .step-header .header-step.current {
5771
    color: #387693;
5772
}
5773

    
5774
.create-vm .image-filters-title {
5775
    margin-top: 1em;
5776
    margin-bottom: 0.5em;
5777
}
5778

    
5779
.create-vm .create-step-cont span.clear {
5780
    font-size: 0.8em;
5781
    font-weight: bold;
5782
    color: #A1C8DB;
5783
    display: block;
5784
}
5785

    
5786
.create-vm .category-filters li {
5787
    float:left;
5788
    display: block;
5789
    padding: 4px;
5790
    background-color: #eee;
5791
    margin-right: 5px;
5792
    font-size: 0.9em;
5793
    margin-bottom: 5px;
5794
}
5795

    
5796
.create-vm .content-cont {
5797
    height: 340px;
5798
    overflow: auto;
5799
}
5800

    
5801
.create-vm .vm-confirm .confirm-params span.cval {
5802
    margin-left: 8px;
5803
    color: #444;
5804
}
5805

    
5806
.create-vm .vm-confirm .confirm-params span.ckey {
5807
    color: #4085A5;
5808
    font-weight: bold;
5809
}
5810

    
5811
.create-vm .vm-confirm .confirm-params {
5812
    margin-bottom: 15px;
5813
}
5814

    
5815
.create-vm .vm-confirm h3.vm-name {
5816
    background-repeat: no-repeat;
5817
    background-position: left center;
5818
    font-size: 1.4em;
5819
    padding-left: 1.45em;
5820
    color: #4085A5;
5821
}
5822

    
5823
.create-vm .images-list-cont h4 a {
5824
    margin-top: 3px;
5825
    margin-right: -2px !important;
5826
}
5827
.create-vm .images-list-cont h4 a,
5828
.create-vm .list-cont h4 a {
5829
    font-size: 0.8em;
5830
    font-weight: normal;
5831
    margin-right: 5px;
5832
    float: right;
5833
    color: #FF7F2A;
5834
}
5835

    
5836
.create-vm .confirm-params {
5837
    overflow: auto;
5838
}
5839

    
5840
.create-vm .vm-confirm .ssh.confirm-params {
5841
    max-height: 150px;
5842
}
5843

    
5844
.create-vm .personalize-cont .confirm-params {
5845
    max-height: 190px;
5846
}
5847

    
5848
.create-vm .personalize-cont,
5849
.create-vm .confirm-cont {
5850
    height: 250px;
5851
}
5852

    
5853
.create-vm .create-step-cont .rename input.rename-field {
5854
    font-size: 1.4em;
5855
    padding: 5px;
5856
    width: 93%;
5857
    padding-left: 30px;
5858
    background-position: 7px center;
5859
    background-repeat: no-repeat;
5860
}
5861

    
5862
.create-vm .create-step-cont .rename label {
5863
    display: block;
5864
}
5865

    
5866
.create-vm .create-step-cont .personalize-conts,
5867
.create-vm .create-step-cont .confirm-conts {
5868
    margin-top: 20px;
5869
}
5870

    
5871
.create-vm .create-step-cont .personalize-cont,
5872
.create-vm .create-step-cont .confirm-cont {
5873
    width: 30%;
5874
    margin-right: 2%;
5875
    border-right: 1px solid #A1C8DB;
5876
    float: left;
5877
}
5878

    
5879
.create-vm .create-step-cont .confirm-cont ul li .title {
5880
    width: 55px;
5881
    float: left;
5882
}
5883

    
5884
.create-vm .create-step-cont .list-cont ul li .value {
5885
    float: right;
5886
    padding-top: 2px;
5887
    display: block;
5888
    width: 90px;
5889
    text-align: right;
5890
}
5891

    
5892
.create-vm .create-step-cont .list-cont ul li.flavor-disktype .value {
5893
    width: 45px;
5894
}
5895

    
5896
.create-vm .create-step-cont .list-cont ul li.image-description .value,
5897
.create-vm .create-step-cont .list-cont ul li.image-name .value {
5898
    float: none;
5899
    width: auto;
5900
    text-align:left;
5901
    width: auto;
5902
}
5903

    
5904
.create-vm .create-step-cont .list-cont ul li {
5905
    padding:0;
5906
    margin:0;
5907
    margin-bottom: 5px;
5908
    border-bottom: 1px solid #EEE;
5909
    padding-bottom: 7px;
5910
    margin-right: 10px;
5911
}
5912

    
5913
.create-vm .create-step-cont li.ssh-key-option .check {
5914
    float: right;
5915
    margin-right: 5px;
5916
    margin-top: 0px;
5917
}
5918

    
5919
.create-vm .create-step-cont li.ssh-key-option.selected {
5920
}
5921
.create-vm .create-step-cont li.ssh-key-option.selected:hover {
5922
    background-color: #F95;
5923
}
5924

    
5925
.create-vm .create-step-cont li.ssh-key-option:hover {
5926
    background-color: #eee;
5927
}
5928

    
5929
.create-vm .create-step-cont li.ssh-key-option.selected {
5930
}
5931

    
5932
.create-vm .create-step-cont li.ssh-key-option {
5933
    padding: 6px !important;
5934
}
5935

    
5936
.create-vm .create-step-cont .list-cont.ssh {
5937
    width: 60%;
5938
}
5939

    
5940
.create-vm .create-step-cont .list-cont.meta h4 {
5941
    margin-right: 0;
5942
}
5943

    
5944
.create-vm .create-step-cont .list-cont.meta {
5945
    margin-right:0;
5946
    border-right: none;
5947
    width: 195px;
5948
}
5949

    
5950
.create-vm .list-cont > h4 {
5951
    font-size: 1.2em;
5952
    margin-right: 10px;
5953
    border-bottom: 1px solid #A1C8DB;
5954
    padding-bottom: 5px;
5955
    color: #387693;
5956
}
5957

    
5958
.create-vm .list-cont .param.image-name {
5959
    margin-bottom: 0 !important;
5960
    border-bottom: none !important;
5961
}
5962

    
5963
.create-vm .list-cont .param h4 {
5964
    margin-bottom: 0px !important;
5965
    font-size: 1.1em !important; 
5966
}
5967

    
5968
.create-vm .list-cont .param {
5969
    margin-bottom: 7px !important;
5970
}
5971

    
5972
.create-vm .list-cont .value {
5973
    font-weight: bold;
5974
}
5975

    
5976
.create-vm .list-cont .param .value {
5977
    font-size: 0.9em;
5978
}
5979

    
5980
.create-vm .list-cont .param .title {
5981
    color: #387693;
5982
}
5983

    
5984
.create-vm .list-cont .image-description {
5985
    margin-left:0;
5986
}
5987

    
5988
.create-vm .list-cont .image-description .value {
5989
    font-weight: normal;
5990
    margin-left: 0 !important;
5991
}
5992

    
5993
.create-vm .list-cont .image-description .title {
5994
    display: none;
5995
    font-size: 0.8em;
5996
}
5997

    
5998
.create-vm .list-cont.meta .values span {
5999
    display:block;
6000
    float: left;
6001
    margin-right: 4px;
6002
    border: 1px solid #eee;
6003
    padding:3px;
6004
    margin-bottom: 4px;
6005
    font-size: 0.9em;
6006
}
6007

    
6008
.create-vm .list-cont.meta .key {
6009
    font-weight: bold;
6010
    font-size: 0.9em;
6011
    display: block;
6012
    margin-bottom: 5px;
6013
}
6014

    
6015
.create-vm .meta input {
6016
    font-size: 0.8em;
6017
}
6018

    
6019
.vm-connect .connect-cont {
6020
    margin-bottom: 20px;
6021
    border-bottom: 1px solid #A1C8DB;
6022
    padding-bottom: 20px;
6023
}
6024

    
6025
.vm-connect .connection-info {
6026
    padding-bottom: 0px;
6027
    margin-bottom: 0;
6028
    border-bottom: none;
6029
}
6030

    
6031
.vm-connect .connection-info .connect a {
6032
    color: #fff;
6033
}
6034

    
6035
.vm-connect .connection-info .connect {
6036
    background-color: #387693;
6037
    color: #fff;
6038
    padding: 10px;
6039
    font-size: 1.2em;
6040
    text-align: center;
6041
}
6042

    
6043
.clip-copy {
6044
    display: block;
6045
    width: 20px;
6046
    height: 20px;
6047
    position: absolute;
6048
    border: 1px solid #387693;
6049
    background-image: url("../images/clipboard.png");
6050
    background-repeat: no-repeat;
6051
    background-position: center;
6052
    cursor: pointer;
6053
    background-color: #A1C8DB;
6054
}
6055

    
6056
.password-cont .clip-copy { right: 10px; top: 8px;}
6057

    
6058

    
6059
.overlay-invitations {
6060
    width: 680px;
6061
}
6062
.invitations-form .sending .sending-msg {
6063
    font-size: 0.8em;
6064
    display: block !important;
6065
    margin-bottom: 5px;
6066
    color: #008800;
6067
}
6068

    
6069
.invitations-form .send-error {
6070
    font-size: 0.8em;
6071
    margin-bottom: 5px;
6072
    margin-top: 5px;
6073
    color: #800;
6074
    padding: 3px;
6075
    padding-left: 0;
6076
    display: none;
6077
}
6078

    
6079
.invitations-form .error label {
6080
    color: #000 !important;
6081
}
6082

    
6083
.invitations-form .form-field {
6084
    width: 49%;
6085
    float: left;
6086
}
6087

    
6088
.invitations-view .left.none {
6089
    background-color: #880000;
6090
}
6091

    
6092
.invitations-form {
6093
    position: relative;
6094
}
6095

    
6096
.invitations-form h3 {
6097
    float: left;
6098
}
6099

    
6100
.invitations-form .add-new-invitation {
6101
    float:left;
6102
    top:2px;
6103
    right: 20px;
6104
    width: 16px;
6105
    height: 16px;
6106
    background-image: url("../images/option-action-add.png");
6107
    background-repeat: no-repeat;
6108
    background-position: center;
6109
    text-indent: -50000em;
6110
    background-color: #4085A5;
6111
    margin-left: 15px;
6112
    cursor: pointer;
6113
}
6114

    
6115
.invitations-view .left {
6116
    font-size: 1em;
6117
    color: #fff;
6118
    font-weight: bold;
6119
    background-color: #4085A5;
6120
    padding: 4px;
6121
}
6122

    
6123
input.has-errors {
6124
    border-color: #ff0000;
6125
}
6126

    
6127
.none-left .invitations-wrapper .invitations-list {
6128
    width: 100% !important;
6129
    border-left: none !important;
6130
    padding-left: 0;
6131
}
6132

    
6133
.invitations-wrapper .invitations-list {
6134
    width: 40%;
6135
    float: left;
6136
    padding-left: 10px;
6137
    border-left: 1px solid #4085A5;
6138
    margin-left: -1px
6139
}
6140

    
6141
.invitations-wrapper .invitations-form {
6142
    width: 57%;
6143
    float: left;
6144
    border-right: 1px solid #4085A5;
6145
}
6146

    
6147
.invitations-wrapper label span {
6148
    color: #aaa;
6149
    font-size: 0.8em;
6150
}
6151

    
6152
.invitations-wrapper label {
6153
    display: block;
6154
    font-size: 0.9em;
6155
    margin-bottom:10px;
6156
    font-weight: bold;
6157
}
6158

    
6159
.invitations-view .add-new-invitation {
6160
    cursor: pointer;
6161
}
6162

    
6163
.invitations-wrapper input.name {
6164
    width: 150px;
6165
}
6166

    
6167
.invitations-wrapper input {
6168
    font-size: 0.9em;
6169
    width: 155px;
6170
    padding:4px;
6171
}
6172

    
6173
.invitations-list .invitation-sent {
6174
    border-bottom: 1px solid #A1C8DB;
6175
    padding-bottom: 5px;
6176
    margin-bottom: 5px;
6177
    position: relative;
6178
}
6179

    
6180
.invitations-view h3 {
6181
    margin-bottom: 10px;
6182
    color: #4085A5;
6183
}
6184

    
6185
.invitations-list .invitation-sent.last,
6186
.invitations-list .invitation-sent:last-child {
6187
    border-bottom: none;
6188
}
6189

    
6190

    
6191
.invitations-list .invitation-sent .email {
6192
    color: #D98147;
6193
    font-size: 0.8em;
6194
    font-weight: bold;
6195
    margin-top: 2px;
6196
}
6197

    
6198
.invitations-list .pagination a,
6199
.invitations-list .pagination span {
6200
    padding: 0.2em 0.3em;
6201
}
6202

    
6203
.invitations-list .pagination {
6204
    font-size: 0.75em;
6205
}
6206

    
6207
.invitations-list .name {
6208
    color: #444;
6209
    font-size: 0.9em;
6210
}
6211

    
6212
.invitations-list .status.sending {
6213
    background-image: url("../images/icons/indicators/small/progress.gif");
6214
}
6215

    
6216
.invitations-list .status.sent {
6217
    background-image: url("../images/invitation_accepted.png");
6218
}
6219

    
6220
.invitations-list .status.resend {
6221
    background-image: url("../images/resend.png");
6222
}
6223

    
6224
.invitations-list .status.resend {
6225
    cursor: pointer;
6226
}
6227

    
6228
.invitations-list .status {
6229
    width: 20px;
6230
    height: 15px;
6231
    position: absolute;
6232
    top:5px;
6233
    right: 2px;
6234
    background-repeat: no-repeat;
6235
    background-position: center;
6236
}
6237

    
6238
.invitations-form .form-entry:last-child {
6239
    border-bottom: none;
6240
}
6241

    
6242
.invitations-form .form-entry {
6243
    position: relative;
6244
    margin-bottom: 10px;
6245
    padding-bottom: 10px;
6246
    border-bottom: 1px solid #ddd;
6247
    margin-right: 10px;
6248
}
6249

    
6250
.invitations-form .send-invitations {
6251
    float: left;
6252
    padding: 5px;
6253
    color: #fff;
6254
    margin-right: 10px;
6255
    margin-top: 10px;
6256
}
6257

    
6258
.invitations-form .form-entry.error {
6259
    padding-bottom: 0px;
6260
}
6261

    
6262
.invitations-form .form-entry.error .remove-invitation {
6263
    bottom: 32px;
6264
}
6265

    
6266
.invitations-form .remove-invitation {
6267
    padding: 5px;
6268
    background-image: url("../images/option-action-remove.png");
6269
    background-position: center;
6270
    background-repeat: no-repeat;
6271
    color: #fff;
6272
    width: 15px;
6273
    height: 15px;
6274
    cursor: pointer;
6275
    text-indent: -50000px;
6276
    position: absolute;
6277
    right: -10px;
6278
    bottom: 14px;
6279
}
6280

    
6281
.invitations-list .resent-info,
6282
.invitations-form .top-info {
6283
    font-size: 0.8em;
6284
    margin-bottom: 10px;
6285
}
6286

    
6287
.invitations-list .msg .email,
6288
.invitations-form .success .msg .email {
6289
    font-weight: bold;
6290
}
6291

    
6292
.invitations-list .msg.err-msg,
6293
.invitations-list .success.msg,
6294
.invitations-form .success .msg {
6295
    background-color: #080;
6296
    color: white;
6297
    padding: 5px;
6298
    margin-right: 10px;
6299
    margin-bottom: 5px;
6300
}
6301
.invitations-list .msg.err-msg,
6302
.invitations-list .success.msg {
6303
    margin-right: 0px;
6304
}
6305
.invitations-list .msg.err-msg {
6306
    background-color: #800;
6307
}
6308

    
6309
.overlay .models-view .previous-view-link {
6310
    margin: -10px;
6311
    margin-bottom:10px;
6312
    padding: 10px 5px;
6313
    background-image: url("../images/left-arrow.png");
6314
    background-repeat: no-repeat;
6315
    background-position: 10px center;
6316
    padding-left: 20px;
6317
    background-color: #93D070;
6318
    cursor: pointer;
6319
    border-bottom: 1px solid #eee;
6320
    text-decoration: underline;
6321
}
6322
.models-view .quick-add {
6323
    text-decoration: underline; 
6324
    color: #4085A5;
6325
    cursor: pointer;
6326
}
6327

    
6328
.empty .items-list {
6329
    margin-top: 0 !important;
6330
}
6331

    
6332
.models-view .items-empty-msg {
6333
    border-top: 1px solid #aaa;
6334
    padding-top: 10px;
6335
    font-size: 1em;
6336
    margin-top:0 !important;
6337
}
6338

    
6339
.models-view .items-empty-msg,
6340
.models-view .model-description {
6341
    color: #444;
6342
    margin: 10px 0;
6343
}
6344

    
6345
.models-view .model-list .collection-action.disabled {
6346
    background-color: #aaa;
6347
    border-color: #aaa;
6348
    cursor: default;
6349
}
6350
.models-view .model-list .collection-action.disabled:hover {
6351
    background-color: #aaa;
6352
    border-color: #aaa;
6353
}
6354

    
6355
.models-view .model-list .collection-action:hover {
6356
    background-color: #aaa;
6357
}
6358

    
6359
.models-view .model-list .collection-action:hover {
6360
    background-color: #F95;
6361
    border-color: #F95;
6362
}
6363

    
6364
.models-view .model-list .collection-action.in-progress {
6365
    background-color: #aaa;
6366
    color: #fff;
6367
    border-color: #aaa;
6368
    background-image: url("../images/icons/indicators/small/progress.gif") !important;
6369
}
6370

    
6371
.models-view .model-list .collection-action.add-generate {
6372
    background-image: url("../images/option-action-generate-ssh.png");
6373
}
6374

    
6375
.models-view .model-list .collection-action.add {
6376
    background-image: url("../images/option-action-add.png");
6377
    padding-right: 20px !important;
6378
}
6379

    
6380
.models-view .model-list .collection-action {
6381
    float: right;
6382
    background-color: #FF7F2A;
6383
    color: #fff;
6384
    padding: 6px 8px;
6385
    margin-left: 10px;
6386
    cursor: pointer;
6387
    padding-right: 30px;
6388
    background-position: right center;
6389
    background-repeat: no-repeat;
6390
    background-clip: border-box;
6391
    border-right: 5px solid #FF7F2A;
6392
}
6393

    
6394
.models-view .items-list {
6395
    margin-top: 10px;
6396
}
6397

    
6398
.models-view .model-list ul li.model-item:last-child {
6399
    margin-bottom: 0;
6400
}
6401

    
6402
.models-view .model-list ul li.model-item {
6403
    background-color: #D4E2E8;
6404
    margin-bottom: 5px;
6405
    position: relative;
6406
}
6407

    
6408
.models-view .model-list ul li.model-item .param {
6409
    float: left;
6410
    padding: 6px;
6411
}
6412

    
6413
.models-view .model-list ul li.model-item .item-action.confirm-remove {
6414
    margin-right: -15px !important;
6415
}
6416

    
6417
.models-view .model-list ul li.model-item .item-action.confirm-remove:hover .cancel {
6418
    color: inherit !important;
6419
}
6420

    
6421
.models-view .model-list ul li.model-item .item-action.confirm-remove:hover {
6422
    background-color: #F95;
6423
    color: inherit !important;
6424
}
6425

    
6426
.models-view .model-list ul li.model-item .item-action.confirm-remove span.cancel {
6427
    padding: 6px !important;
6428
}
6429

    
6430
.models-view .model-list ul li.model-item .item-action.confirm-remove span {
6431
    display: block;
6432
    float: left;
6433
    padding: 6px 15px;
6434
}
6435

    
6436
.models-view .model-list ul li.model-item .item-action .cancel-remove:hover {
6437
    color: #fff !important;
6438
}
6439

    
6440
.models-view .model-list ul li.model-item .item-action.confirm-remove,
6441
.models-view .model-list ul li.model-item .item-action .do-confirm,
6442
.models-view .model-list ul li.model-item .item-action .cancel-remove {
6443
    display:none !important;
6444
    background-color: #D95D0A;
6445
    padding:0;
6446
    margin:0;
6447
}
6448

    
6449
.models-view .model-list ul li.model-item.pending-delete .item-action.remove {
6450
    display: none;
6451
}
6452

    
6453
.models-view .model-list ul li.model-item.pending-delete .item-action .cancel {
6454
    background-color: #F95;
6455
}
6456

    
6457
.models-view .model-list ul li.model-item.pending-delete .item-action.confirm {
6458
    background-color: #FF7F2A;
6459
}
6460

    
6461
.models-view .model-list ul li.model-item.pending-delete .item-action.confirm-remove,
6462
.models-view .model-list ul li.model-item.pending-delete .item-action.confirm-remove .do-confirm,
6463
.models-view .model-list ul li.model-item.pending-delete .item-action .cancel-remove {
6464
    display:block !important;
6465
}
6466

    
6467
.models-view .model-list ul li.model-item.pending-delete .item-action {
6468
    display: block;
6469
}
6470

    
6471
.models-view .model-list ul li.model-item.expanded .item-action,
6472
.models-view .model-list ul li.model-item:hover .item-action {
6473
    display: block;
6474
}
6475

    
6476
.models-view .model-list ul li.model-item .item-action.hide {
6477
    background-image: url("../images/minus-8.png");
6478
}
6479
.models-view .model-list ul li.model-item .item-action.show:hover {
6480
    background-image: url("../images/plus-8.png");
6481
}
6482

    
6483
.models-view .model-list ul li.model-item .item-action.show {
6484
    background-image: url("../images/plus-8-dark.png");
6485
}
6486

    
6487
.models-view .model-list ul li.model-item .item-action.remove {
6488
    background-image: url("../images/option-action-remove.png");
6489
}
6490

    
6491
.models-view .model-list ul li.model-item .item-action.edit:hover {
6492
    background-image: url("../images/option-action-edit-light.png");
6493
}
6494

    
6495
.models-view .model-list ul li.model-item .item-action.edit {
6496
    background-image: url("../images/option-action-edit.png");
6497
}
6498
.models-view .model-list ul li.model-item .item-action.remove:hover {
6499
    background-color: #880000 !important;
6500
    border-color: #800 !important;
6501
}
6502

    
6503
.models-view .model-list ul li.model-item.expanded .item-action.show,
6504
.models-view .model-list ul li.model-item.expanded .item-action.hide,
6505
.models-view .model-list ul li .item-actions .item-action:hover {
6506
    background-color: #4085A5;
6507
    color: #fff;
6508
    border-color: #4085A5;
6509
}
6510

    
6511
.models-view .model-list ul li .item-actions {
6512
    position: absolute;
6513
    right: -10px;
6514
    top: 0px;
6515
}
6516

    
6517
.models-view .model-list ul li .item-actions .item-action {
6518
    float: right;
6519
    padding: 6px;
6520
    margin-right: 10px;
6521
    display: none;
6522
    cursor: pointer;
6523
    padding-right: 20px;
6524
    background-repeat: no-repeat;
6525
    background-position: right center;
6526
    border-right: 5px solid transparent;
6527
}
6528

    
6529
.models-view .model-list h3 {
6530
    float: left;
6531
}
6532

    
6533
.models-view h3 {
6534
    font-size: 1.2em;
6535
    margin-bottom: 1em;
6536
    margin-top: 5px;
6537
    color: #4085A5;
6538
}
6539

    
6540
.models-view .form-actions {
6541
    font-size: 1.1em;
6542
}
6543

    
6544
.models-view .model-list ul li,
6545
.models-view .model-list ul {
6546
    list-style: none;
6547
}
6548

    
6549
.models-view .model-list ul li.header {
6550
    display: none;
6551
}
6552

    
6553
.models-view .model-form textarea {
6554
    width: 99%;
6555
    height: 100px;
6556
    border: 1px solid #aaa;
6557
}
6558

    
6559

    
6560
.models-view .model-form .form-field {
6561
    margin-bottom: 10px;
6562
}
6563

    
6564
.models-view .model-form label {
6565
    display: block;
6566
    color: #406A7D;
6567
    font-size: 1.1em;
6568
    margin: 0px 0 5px 0;
6569
}
6570

    
6571
.models-view .model-form .inline label {
6572
    float: left;
6573
    margin-right: 10px;
6574
    margin-top: 10px !important;
6575
}
6576

    
6577
.models-view .model-form input.long {
6578
    width: 400px;
6579
}
6580

    
6581
.models-view .model-form .inline input {
6582
    width: auto;
6583
    margin-top: 10px;
6584
}
6585

    
6586
.models-view .model-form .inline select {
6587
    width: auto;
6588
    margin-top: 7px;
6589
}
6590

    
6591
.models-view .model-form .inline .errors,
6592
.models-view .model-form .inline .field-desc {
6593
    clear: both;
6594
}
6595

    
6596
#user_public_keys .private-download {
6597
    margin: 5px 0;
6598
    margin-top: 6px;
6599
}
6600

    
6601
#user_public_keys .private-cont form {
6602
    float: left;
6603
    margin-left: 5px;
6604
}
6605

    
6606
#user_public_keys input.form-text:hover {
6607
    background: #F95;
6608
}
6609

    
6610
#user_public_keys input.form-text {
6611
    background: #FF7F2A;
6612
    color: #fff;
6613
    border: 1px solid #F95;
6614
    padding: 0 5px;
6615
    margin: 0 5px;
6616
    margin-top: -1px;
6617
    cursor: pointer;
6618
}
6619

    
6620
#user_public_keys .form-text {
6621
    float: left;
6622
}
6623

    
6624
#user_custom_images,
6625
#user_public_keys {
6626
    font-size: 0.7em;
6627
}
6628

    
6629
#user_public_keys .download-button {
6630
    width: 30px;
6631
    height: 30px;
6632
}
6633

    
6634

    
6635
#user_public_keys #model-item-tpl {
6636
    display: none;
6637
}
6638
#user_public_keys .model-item .name {
6639
    color: #4085A5;
6640
    font-size: 1.2em;
6641
}
6642

    
6643
#user_public_keys .model-item .fingerprint .flabel {
6644
    color: #888;
6645
    float: left;
6646
    margin-right: 5px;
6647
}
6648

    
6649
#user_public_keys .model-item .fingerprint {
6650
    float: none;
6651
    clear: both;
6652
    color: #444;
6653
    font-family: monospace;
6654
    letter-spacing: 1px;
6655
    padding: 4px;
6656
    font-size: 0.9em;
6657
    border-top: 1px solid #fff;
6658
}
6659

    
6660
#user_public_keys .model-item .publicid {
6661
    display: none;
6662
}
6663

    
6664
#user_public_keys .model-item.expanded .publicid .param-content {
6665
    padding: 5px 5px;
6666
    overflow: auto;
6667
    background-color: #FFF;
6668
    border: 1px solid #4085A5;
6669
    border-left: none;
6670
    border-right: none;
6671
    font-size: 1.1em;
6672
}
6673

    
6674
#user_public_keys .model-item.expanded .publicid .param-content textarea {
6675
    width: 100%;
6676
    height: 90px;
6677
    margin:0;
6678
    padding:0;
6679
    border:none;
6680
    overflow: auto;
6681
}
6682

    
6683
#user_public_keys .model-item.expanded .publicid {
6684
    display: block;
6685
    background-color: #fff;
6686
    width: 100%;
6687
    margin-top: 0px;
6688
    margin-left: 0px;
6689
    color: #fff;
6690
    padding:0 !important;
6691
}
6692

    
6693
.models-view .form-messages {
6694
    margin-bottom: 10px;
6695
}
6696

    
6697
.models-view .list-messages {
6698
    margin-top: 10px;
6699
}
6700

    
6701
.models-view .form-messages .error,
6702
.models-view .form-messages .success,
6703
.models-view .list-messages .error,
6704
.models-view .list-messages .success,
6705
#user_public_keys .private-cont {
6706
    background-color: #AADE87;
6707
    color: #447821;
6708
    padding: 5px;
6709
    border: 1px solid #447821;
6710
    font-size: 1.1em;
6711
    margin-top: 5px;
6712
}
6713

    
6714
.models-view .form-messages .error,
6715
.models-view .list-messages .error {
6716
    background-color: #DE8D87;
6717
    color:  #782421 !important;
6718
    border-color: #782421;
6719
}
6720

    
6721
#user_public_keys .limit-msg {
6722
    color: #800;
6723
    position: absolute;
6724
    right: 20px;
6725
    top: 25px;
6726
}
6727

    
6728
#user_public_keys .private-cont {
6729
    margin-top: 10px;
6730
}
6731

    
6732
#user_public_keys .private-cont .private-msg {
6733
    float: left;
6734
    padding:5px;
6735
    margin-top: 5px;
6736
}
6737

    
6738
#user_public_keys .private-cont textarea {
6739
    margin: 5px;
6740
    width: 97%;
6741
    height: 200px;
6742
}
6743

    
6744
#user_public_keys .private-cont .close-private:hover {
6745
    color: #Fff;
6746
}
6747

    
6748
#user_public_keys .private-cont .close-private {
6749
    float: right;
6750
    margin-right: 5px;
6751
    font-weight: bold;
6752
    cursor: pointer;
6753
    text-decoration: underline;
6754
}
6755

    
6756
#user_public_keys .model-item .key-type {
6757
    background-color: #72ADC8;
6758
    color: #fff;
6759
    text-align: center;
6760
    font-size: 0.9em;
6761
    padding:2px 10px;
6762
    margin: 4px 6px;
6763
    margin-top: 7px;
6764
    font-weight: bold;
6765
}
6766

    
6767
#user_public_keys .private-cont .down-button {
6768
}
6769

    
6770
.models-view .form-field .field-desc {
6771
    font-style: italic;
6772
    font-size: 1em;
6773
    color: #888;
6774
}
6775

    
6776
.models-view .form-field.error label {
6777
    font-weight: bold;
6778
    color: #800 !important;
6779
}
6780

    
6781
.models-view .form-field .errors {
6782
    margin: 5px 0;
6783
}
6784

    
6785
.models-view .form-field .errors .error {
6786
    background-color: transparent;
6787
    border: none;
6788
    color: #800;
6789
}