Statistics
| Branch: | Tag: | Revision:

root / ui / static / main.css @ b128dc09

History | View | Annotate | Download (93.7 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(./body-bg.png) repeat-x #FFFFFF;
21
    text-align:center;
22
    font-size: 16px;
23
}
24

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

    
29
#okeanos-image {
30
    position: absolute;
31
    bottom: -0px;
32
    right: 0;
33
    z-index:0;
34
}
35

    
36
#container {
37
    position: relative;
38
        margin:0 auto;
39
        width: 100%;
40
        background: transparent;
41
}
42

    
43
#header {
44
    height: 93px;
45
    background: url("./header-bg.png") repeat-x scroll 0 0 #FFFFFF;
46
    margin: 0 auto;
47
    width: 700px;
48
    text-align: left;
49
    position: relative;
50
}
51

    
52
#content {
53
    padding-bottom: 10px;
54
    width: 100%;
55
}
56

    
57
div#wrapper {
58
    width: 700px;
59
    margin: 0em auto;
60
    text-align: left;
61
}
62

    
63
#footer {
64
    height: 80px;
65
    background-color: #4085A5;
66
    width:100%;
67
}
68

    
69
#footer-container {
70
    height: 80px;
71
    width: 100%;
72
    left:0;
73
    z-index:10;
74
}
75

    
76
#footer div.grnet-sign {
77
    margin-top:10px;
78
}
79

    
80
#footer div.grnet-sign a{
81
    color: #72ADC8;
82
}
83

    
84
#footer div.grnet-sign a:hover {
85
    color: #FFFFFF;
86
}
87

    
88
ol, ul {
89
    list-style: none;
90
}
91

    
92
blockquote, q {
93
    quotes: none;
94
}
95

    
96
blockquote:before, blockquote:after,
97
q:before, q:after {
98
    content: '';
99
    content: none;
100
}
101

    
102
/* remember to define focus styles! */
103
:focus {
104
    outline: 1px dotted #87AADE;
105
}
106

    
107
/* remember to highlight inserts somehow! */
108
ins {
109
    text-decoration: none;
110
}
111

    
112
del {
113
    text-decoration: line-through;
114
}
115

    
116
/* tables still need 'cellspacing="0"' in the markup */
117
table {
118
    border-collapse: collapse;
119
    border-spacing: 0;
120
}
121

    
122
h5 {
123
    font-weight: normal;
124
    margin-bottom:3px;
125
}
126

    
127
.tab-name, 
128
.machine-container .name,
129
h5.namecontainer span,
130
.single .machine-detail.title {
131
    font-family: 'Ubuntu';
132
}
133

    
134
.create-container a {
135
    font-family: 'Open Sans', sans-serif;
136
}
137

    
138
/* root element for tabs  */
139
.tab-name {
140
    background-color: #5CA1C0;
141
    color: #FFFFFF;
142
    float: right;
143
    font-size: 150%;
144
    height: 31px;
145
    text-align: right;
146
    padding-right: 15px;
147
    width: 170px;
148
}
149

    
150
.tab-separator {
151
    background-color: white;
152
    float: left;
153
    width: 2px;
154
    height: 23px;
155
    margin-top: 4px;
156
}
157

    
158
ul.css-tabs {
159
    padding: 0;
160
    height:31px;
161
    background-color: #5CA1C0;
162
}
163

    
164
ul.css-tabs .secondary {
165
    position:relative;
166
}
167

    
168
/* single tab */
169
ul.css-tabs li {
170
    float:left;
171
    padding:0;
172
    list-style-type:none;
173
}
174

    
175
ul.css-tabs .current {
176
    background: #4085A5;
177
}
178

    
179
/* link inside the tab. uses a background image */
180
ul.css-tabs a {
181
    float:left;
182
    display:block;
183
    text-decoration:none;
184
    color:#d2d2d2;
185
    position:relative;
186
    outline:0;
187
    padding: 4px 25px 0;
188
    height: 27px;
189
}
190

    
191
ul.css-tabs a:hover {
192
    background: #74AEC9;
193
}
194

    
195
/* selected tab */
196
ul.css-tabs a.current,
197
ul.css-tabs a.active {
198
    cursor:default;
199
    background: #4085A5;
200
}
201

    
202
/* tab pane */
203
div.css-panes {
204
/*    border-top: 10px solid #87aade;
205
    border-bottom: 10px solid #87aade;  */
206
    background: transparent;
207
}
208

    
209
.css-panes > div.pane {
210
    display:none;
211
}
212

    
213
.panes-menu {
214
    height: 30px;
215
    margin-bottom: 10px;
216
}
217
/* CSS3 border radius for various elements. yea - CSS isn't perfect */
218
.rounded, #sheet input, .error {
219
    border-radius: 5px;
220
    -webkit-border-radius: 5px;
221
    -moz-border-radius: 5px;
222
    -o-border-radius: 5px;
223
    -khtml-border-radius: 5px;
224
}
225

    
226
/*validation error message*/
227
/*.error {*/
228
    /*background-color:#E8FF6D;*/
229
    /*padding:4px;*/
230
    /*-webkit-box-shadow: #000 0 0 9pt;*/
231
    /*-moz-box-shadow: #000 0 0 9pt;*/
232
/*}*/
233
.error {
234
    color: #f00 !important;
235
}
236

    
237
/* nested arrow inside error message. It's 100% CSS. No images. */
238
.error em {
239
    border: 10px solid;
240
    border-color: #E8FF6D transparent transparent;
241
    bottom: -17px;
242
    display: block;
243
    height: 0;
244
    left: 10px;
245
    position: absolute;
246
    width: 0;
247
}
248

    
249
/* input field that caused validation error */
250
.invalid {
251
    background-color: rgba(221, 233, 255, 0.898) !important;
252
}
253

    
254
#beforecreate {
255
    background-color: #FF9955;
256
    height: 32px;
257
    width: 13px;
258
}
259

    
260
.pane-top {
261
    height: 70px;
262
    position: relative;
263
    background: #EFF7FA 0px 0px;
264
    /*margin-bottom: -2px;*/
265
}
266

    
267
#machines-pane-top.empty {
268
    background: transparent;
269
}
270

    
271
#beforecreate {
272
    border-left: 16px solid #efefef;
273
    margin-left: -16px;
274
}
275

    
276
.create-container {
277
    line-height: 4em;
278
}
279

    
280
#createcontainer a {
281
}
282

    
283
#create {
284
    background-color: #FF7F2A;
285
    color: #000;
286
    cursor: pointer;
287
    text-decoration: none;
288
    font-size:100%;
289
}
290

    
291
#create:hover {
292
    background-color: #FF9955;
293
}
294

    
295
#console-header {
296
    height: 67px;
297
    margin-bottom:15px;
298
    background: url("./header-bg.png") repeat-x scroll 0 0 #FFFFFF;
299
}
300

    
301
.header-logo {
302
    padding-top: 28px;
303
}
304

    
305
div#footer-text a {
306
    color: #FFFFFF;
307
    text-decoration: none;
308
}
309

    
310
div#footer-text{
311
    color: #FFFFFF;
312
    font-size: 75%;
313
    padding-top: 10px;
314
}
315

    
316
#footer-bg {
317
    background: url("./footer-bg.png") no-repeat scroll 0 0 #4085A5;
318
    background-position:right;
319
}
320

    
321
.modal {
322
    background-color:#fff;
323
    display:none;
324
    width:30em;
325
    padding:1em;
326
    text-align:left;
327
}
328

    
329
/* server wizard scrollable root element and network wizard */
330
#wizard, #networks-wizard {
331
    font-size:75%;
332
    height:425px;
333
    width:453px;
334
    overflow:hidden;
335
    position:absolute !important;
336
}
337

    
338
/* scrollable items */
339
#wizard .items {
340
    width:20000em;
341
    clear:both;
342
    position:absolute;
343
    display:block;
344
    padding: 0;
345
    margin: 0;
346
    border:none;
347
    background:none;
348
}
349

    
350
/* single item */
351
#wizard .page, #networks-wizard div.container {
352
    padding: 0px 40px 20px 15px;
353
    width:447px;
354
    float:left;
355
    display:block;
356
    border:none;
357
    background-color: transparent;
358
}
359

    
360
#networks-wizard div.container {
361
    background-color: #ECF4F8;
362
    width:400px;
363
    height: 180px;
364
    margin-bottom:50px;
365
}
366

    
367
/* title */
368
#wizard h2, #networks-wizard h2 {
369
    color: #FF7B24;
370
    font-size: 100%;
371
    font-style: italic;
372
    font-weight: bold;
373
    margin-left: 37px;
374
    margin-top: 17px;
375
}
376

    
377
#networks-wizard h2 {
378
    margin-top: 15px;
379
}
380

    
381
#wizard li {
382
    margin-bottom:1.2em;
383
}
384

    
385
#wizard .pane li {
386
    margin: 0;
387
}
388

    
389
#wizard label {
390
    font-size:120%;
391
    display:block;
392
    clear: both;
393
}
394

    
395
#wizard label strong {
396
    position:relative;
397
    top:-1px;
398
    font-size: 80%;
399
    font-weight: normal;
400
}
401

    
402
#wizard label em {
403
    font-size:75%;
404
    color:#666;
405
    font-style:normal;
406
}
407

    
408
#wizard .text {
409
    width: 270px;
410
    padding: 5px;
411
    margin-top: 10px;
412
    border: 1px solid #ccc;
413
    color: #456;
414
    letter-spacing: 1px;
415
}
416

    
417
#wizard select {
418
    border:1px solid #ccc;
419
    width:94%;
420
    padding:4px;
421
    display: none;
422
}
423

    
424
#wizard .double label {
425
    width:50%;
426
    float:left;
427
}
428

    
429
#wizard .double .text {
430
    width:93%;
431
}
432

    
433
#wizard .clearfix {
434
    clear:left;
435
    padding-top:10px;
436
}
437

    
438
#wizard .right {
439
    float:right;
440
}
441

    
442
#wizard .error {
443
    border:1px solid red;
444
}
445

    
446
#wizard a:hover div.image {
447
    background-color: #C5DEE9;
448
}
449

    
450
.selecteddiv {
451
    background-color: #C5DEE9 !important;
452
}
453

    
454
#wizard label a:hover strong {
455
    color: black;
456
}
457

    
458
#wizard div.image span.size {
459
    font-size: 75%;
460
    color: #666;
461
}
462

    
463
#wizard div.image .radio {
464
    float: left;
465
    margin-top: 10px;
466
}
467

    
468
#wizard div.image span.image-id, #wizard div.image span.description {
469
    font-size: 75%;
470
    color: #666;
471
    font-weight: normal;
472
    display:inline;
473
}
474

    
475
#wizard a:hover div.image span.image-id, #wizard a:hover div.image span.description, #wizard a:hover div.image span.size {
476
    color: black;
477
}
478

    
479
#wizard .cost {
480
    color: #79A4C1;
481
    margin-top: 40px;
482
    clear:both;
483
    margin-left: 15px;
484
    font-size: 95%;
485
}
486

    
487
#wizard #status {
488
    height: 50px;
489
    background-color: #4085A5;
490
}
491

    
492
#wizard .headernumber {
493
    font-size: 410%;
494
}
495

    
496
#wizard .headerbody {
497
    font-size: 120%;
498
    font-weight: normal;
499
    display: inline;
500
    top: -15px;
501
    position: relative;
502
}
503

    
504
#wizard .first {
505
    left: -10px;
506
}
507

    
508
#wizard .checked {
509
    color: #64a6c4 !important;
510
}
511

    
512
#wizard .li-2 {
513
    margin-top: -1px !important;
514
}
515

    
516
#wizard .img-check {
517
    margin-bottom: 8px;
518
    margin-left: -8px;
519
}
520

    
521
#wizard .li-1 .img-check {
522
    margin-left: 2px;
523
}
524

    
525
#wizard .topruler, #networks-wizard .topruler, #wizard .bottomruler, #networks-wizard .bottomruler {
526
    background-color: #CDE2EC;
527
    color: #CDE2EC;
528
    border: 0 none;
529
    height: 4px;
530
    margin-left: -1px;
531
    width: 447px;
532
    margin-bottom: 6px;
533
    margin-top: 4px;
534
}
535

    
536
#wizard .bottomruler, #networks-wizard .bottomruler {
537
    margin-top:6px;
538
}
539

    
540
#networks-wizard .topruler, #networks-wizard .bottomruler {
541
    width: 455px;
542
    float: left;
543
}
544

    
545
#wizard #cancel, #networks-wizard .cancel {
546
    background-color: #4085A5;
547
    border-color: #4085A5;
548
    text-align: center !important;
549
}
550

    
551
#wizard #cancel:hover, #networks-wizard .cancel:hover {
552
    background-color: #7DB4CD;
553
    border-color: #7DB4CD;
554
}
555

    
556
#wizard #start, #networks-wizard .create {
557
    text-align: center;
558
    background-color: #FF7F2A;
559
    border-color: #FF7F2A;
560
}
561

    
562
:focus {
563
    outline: none;
564
    -moz-outline-style: none;
565
}
566

    
567
#wizard .img-next {
568
    margin: 0 -4px -1px 8px;
569
}
570

    
571
#wizard .img-prev {
572
    margin: 0 8px -1px -4px;
573
}
574

    
575
#networks-wizard .create {
576
    float:right;
577
    width: 140px;
578
}
579

    
580
.overlay-networks-create .form-actions {
581
    float: right;
582
    margin-top: -26px !important;
583
}
584

    
585
#wizard #start:hover, #networks-wizard .create:hover {
586
    background-color: #FF9651;
587
    border-color: #FF9651;
588
}
589

    
590
#wizard .separator-end {
591
    position: absolute;
592
    background-color: #387693;
593
    height: 5px;
594
    margin-left: -14px;
595
    margin-top: 382px;
596
    width: 550px;
597
}
598

    
599
.page ul {
600
    height: 270px;
601
    overflow: auto;
602
}
603

    
604
.panes ul.pane {
605
    height: 220px;
606
}
607

    
608
#wizard #tabscontainer {
609
    background-color: #CDE2EC;
610
    height: 20px;
611
    width: 448px;
612
}
613

    
614
.page ul.tabs {
615
    overflow: hidden;
616
    height: auto;
617
    margin-bottom: -1px;
618
    margin-top: -1px;
619
}
620

    
621
.page ul.tabs li {
622
    float: right;
623
    margin: 0 0.2em;
624
}
625

    
626
#status li {
627
    float: left;
628
    color: #387693;
629
    padding: 0 1px 0 37px;
630
    bottom: 0px;
631
}
632

    
633
#status li.active .headernumber {
634
    color: #FFFFFF;
635
}
636

    
637
#status li.active .headerbody {
638
    color: #FFFFFF;
639
}
640

    
641
div.image-container {
642
    border-bottom: 1px solid #CCCCCC;
643
    margin-left: 10px;
644
    margin-right: 10px;
645
}
646

    
647
#page2-container {
648
    background-color: #ECF4F8;
649
    height: 193px;
650
    margin-top: 3px;
651
    padding-top: 25px;
652
}
653

    
654
#page3-container {
655
    background-color: #ECF4F8;
656
    height: 245px;
657
    margin-bottom: 32px;
658
    padding-left: 50px;
659
}
660

    
661
/* slider root element */
662
.slider {
663
    border: 1px solid #666;
664
    cursor: pointer;
665
    display: inline !important;
666
    float: left;
667
    margin: 5px 0 20px 10px;
668
    position: relative;
669
    width: 250px;
670
}
671

    
672
.sliders {
673
    float:left;
674
    width: 40px;
675
    margin-left: 10px;
676
    margin-top: 3px;
677
}
678

    
679
.units {
680
    padding-left:10px;
681
}
682

    
683
.slider-container {
684
    padding-bottom: 15px;
685
    margin-left: 5px;
686
}
687

    
688
/* drag handle */
689
.handle {
690
    -moz-box-shadow: 0 0 2px #000000;
691
    background: url("./h30.png") repeat-x scroll 0 0 #FFFFFF;
692
    border: 1px solid #000000;
693
    cursor: move;
694
    display: block;
695
    height: 10px;
696
    margin-top: -8px;
697
    position: absolute;
698
    width: 8px;
699
}
700

    
701
/* progress bar (enabled with progress: true) */
702
.progress {
703
    height: 3px;
704
    background-color: #387693;
705
}
706

    
707
/* the input field */
708
.range {
709
    border: 1px solid #387693;
710
    float: left;
711
    font-size: 100%;
712
    margin: -3px 0 0 15px;
713
    padding: 2px 5px 2px 0;
714
    text-align: right;
715
    width: 50px;
716
}
717

    
718
.selectedrange {
719
    border-color: #5599FF;
720
}
721

    
722
#credits-indicator {
723
    background-color: #ECF4F8;
724
    float: none;
725
    margin: 0 0 0 10px;
726
    border: 1px solid #387693;
727
    color: #387693;
728
}
729

    
730
/* machines */
731
.machine-container {
732
    position:relative;
733
}
734

    
735
.icon .machine-container.last .machine-data-cont, .machine-container:last-child .machine-data-cont {
736
    margin-bottom:0;
737
    padding-bottom: 0;
738
    border-bottom: none;
739
}
740

    
741
.icon .machine-container.last .machine-data, .machine-container:last-child .machine-data {
742
    border-bottom: none;
743
}
744

    
745
.icon .machine-container .subtitle {
746
    font-size: 0.70em;
747
    color: #222;
748
    line-height: 23px;
749
    height: 23px;
750
    margin-top: -5px;
751
}
752

    
753
.icon .machine-container .subtitle {
754
    
755
}
756

    
757
.icon .machine-container .info {
758
    margin-top: 2px;
759
    height: 17px;
760
}
761

    
762
.icon .machine-container .building-progress {
763
    vertical-align: top;
764
}
765

    
766
.ip-version-label {
767
    font-size: 0.8em;
768
    padding: 0.3em;
769
    background-color: #C4DDE9;
770
    color: #000;
771
}
772

    
773
.icon .machine-data {
774
    width: 520px;
775
    float: left;
776
    background-color: transparent;
777
}
778

    
779
.icon .machine-info {
780
    padding: 10px 0;
781
}
782

    
783
.icon .machine-details .name {
784
    height: 28px;
785
}
786

    
787
.icon .machine-connect {
788
    width: 80px;
789
    float: left;
790
}
791

    
792
.icon .machine-details {
793
    width: 310px;
794
    float: left;
795
    margin-top: -6px;
796
}
797

    
798
.icon .state {
799
    font-size: 98%;
800
    width: 120px;
801
    margin-right: 10px;
802
    float: left;
803
    height: 55px;
804
}
805

    
806
.vm-actions {
807
    position: relative;
808
}
809

    
810
.icon .vm-actions {
811
    /*display: none;*/
812
}
813

    
814
.icon .vm-actions, .network .vm-actions {
815
    width: 180px;
816
    height: 78px;
817
    float: left;
818
}
819

    
820
.icon .machine-container:hover .machine-data {
821
    background-color:#A1C8DB !important;
822
}
823

    
824
.icon .machine-container:hover .vm-actions {
825
    display: block;
826
}
827

    
828
.vm-actions {
829
    font-size: 75%;
830
}
831

    
832
.vm-actions a {
833
    color: black;
834
    height: 15px;
835
    margin: 0 0 1px 4px;
836
    padding: 1px;
837
    padding-left: 8px;
838
    display: block;
839
}
840

    
841
.vm-actions a:hover {
842
    background-color:#A1C8DB;
843
    color: #fff;
844
    border-left: 4px solid #7DB4CD;
845
    padding-left: 4px;
846
}
847

    
848
.vm-actions a.selected {
849
    color: #FF7F2A !important;
850
}
851

    
852
.vm-actions a.selected {
853
    background-color:transparent;
854
}
855

    
856
.vm-actions .action-container {
857
    position: relative;
858
}
859

    
860
.vm-actions .action-container .confirm_single {
861
    position: absolute;
862
    right: -20px;
863
    top: -2px;
864
}
865

    
866
div.list div.actions a.enabled.destroy {
867
    color: #981D1D;
868
}
869

    
870
.vm-actions .action-container.destroy {
871
    position: absolute;
872
    bottom: -2px;
873
    width: 100%;
874
    left: 0px;
875
    background: transparent;
876
}
877

    
878
.vm-actions .action-container.destroy a {
879
    color: #981D1D;
880
}
881

    
882
.icon .light-background .machine-data, div.network.light-background, div.network.expand {
883
    background-color:#aed2e3 !important;
884
}
885

    
886
.single .light-background {
887
    background-color:#aed2e3;
888
}
889

    
890
.icon .machine-data-cont {
891
    margin-bottom: 5px;
892
    padding-bottom: 5px;
893
    border-bottom: 1px solid #D1E7F0;
894
    width: 520px;
895
    float: left;
896
}
897
.icon .terminated .machine-data-cont {
898
    border-color: #B6CED6;
899
}
900

    
901
.machine a {
902
    font-weight: normal;
903
    text-decoration: none;
904
}
905

    
906
.machine span.name, .machine span.ip {
907
    font-size: 75%;
908
    color: black;
909
    margin-top: 6px;
910
}
911

    
912
.machine span.name {
913
    font-weight: bold;
914
}
915

    
916
.oldValue {
917
    display:none;
918
}
919

    
920
.state {
921
}
922

    
923
.state div {
924
    text-align: right;
925
    margin-right: 3px;
926
}
927

    
928
/* icon view actions */
929
div.machine div.actions a.shutdown-padding {
930
    margin-bottom: 22px;
931
}
932

    
933
div.actions a.enabled:hover{
934
    color: black !important;
935
    text-decoration: underline;
936
    display: block;
937
}
938

    
939
div.machine:hover .actions a {
940
    visibility: visible;
941
}
942

    
943
div.machine div.display a{
944
    visibility: visible;
945
}
946

    
947
div.machine div.actions .disabled {
948
    display: none;
949
}
950

    
951
div.single-container div.vm-actions .disabled {
952
    display: none;
953
}
954

    
955
div.machine div.actions .disabled {
956
    display: none;
957
}
958

    
959
div.connect-arrow {
960
    background: url(/static/connect-arrow.png) no-repeat;
961
    height: 28px;
962
    width:14px;
963
    position: absolute;
964
    display: none;
965
}
966

    
967
.machine div.connect-arrow {
968
    display: none;
969
    left: -3px;
970
    position: absolute;
971
    top: 9px;
972
}
973

    
974
div.connect-arrow:hover, div.connect-arrow.border-hover, div.connect-arrow-ie, div.connect-arrow.border-ie {
975
    cursor: pointer;
976
    background: url(/static/connect-arrow-hover.png) no-repeat;
977
    height: 28px;
978
    width:26px;
979
}
980

    
981
div.connect-border {
982
    opacity: 0.8;
983
    filter: alpha(opacity = 80);
984
    background-color:#4fe0c3;
985
    height:28px;
986
    width: 12px;
987
    position: absolute;
988
    display: none;
989
}
990

    
991
div.connect-border:hover {
992
    cursor: pointer;
993
}
994

    
995
.machine div.connect-border {
996
    display: none;
997
    left: -15px;
998
    position: absolute;
999
    top: 9px;
1000
}
1001

    
1002
.standard .machine .logo {
1003
    float: left;
1004
    width: 50px;
1005
    height: 54px;
1006
    margin: 4px 14px 0;
1007
}
1008
.machine .logo {
1009
    background-image: url("./icons/machines/medium/unknown-sprite.png");
1010
    background-repeat: no-repeat;
1011
    cursor: pointer;
1012
}
1013

    
1014
.standard .machine .single-image-state1 {
1015
    background-position: 0px 0;
1016
}
1017

    
1018
.standard .machine .single-image-state3 {
1019
    background-position: -100px 0;
1020
}
1021

    
1022
.standard .machine .single-image-state4 {
1023
    background-position: -150px 0;
1024
}
1025

    
1026
.standard .machine .single-image-state2 {
1027
    background-position: -50px 0;
1028
}
1029

    
1030
.standard .running .machine .logo {
1031
   cursor: pointer;
1032
}
1033

    
1034
.list .machine img {
1035
    margin: 0;
1036
}
1037

    
1038
.icon div.ip, .icon div.ips {
1039
    font-size: 75%;
1040
}
1041

    
1042
div.indicators {
1043
    margin-right: 2px !important;
1044
}
1045
div.indicator1, div.indicator2, div.indicator3, div.indicator4 {
1046
    background-color: #63cf1c;
1047
    width:10px;
1048
    height:11px;
1049
    clear: none;
1050
    float:right;
1051
}
1052

    
1053
.view-separator {
1054
    color:#5F8DD3;
1055
}
1056

    
1057
.running.disabled {
1058
    background: transparent;
1059
}
1060

    
1061
.running-state .indicator1, .running-state .indicator2, .running-state .indicator3, .running-state .indicator4 {
1062
    background-color: #63cf1c;
1063
}
1064

    
1065
.rebooting-state .indicator1, .rebooting-state .indicator2, .rebooting-state .indicator3, .rebooting-state .indicator4 {
1066
    background-color: #d4aa00;
1067
}
1068

    
1069
.error-state .indicator1, .error-state .indicator2, .error-state .indicator3, .error-state .indicator4 {
1070
    background-color: #ff0000;
1071
}
1072

    
1073
.terminated-state .indicator1, .terminated-state .indicator2, .terminated-state .indicator3, .terminated-state .indicator4 {
1074
    background-color: #5e1616;
1075
}
1076

    
1077
.build-state .indicator1, .build-state .indicator2, .build-state .indicator3, .build-state .indicator4 {
1078
    background-color: #FF7F2A;
1079
}
1080

    
1081
.destroying-state .indicator1, .destroying-state .indicator3, .destroying-state .indicator2, .destroying-state .indicator4 {
1082
    background-color: #4085a5 !important;
1083
}
1084

    
1085
.shutting-state .indicator1, .shutting-state .indicator3, .shutting-state .indicator2, .shutting-state .indicator4 {
1086
    background-color: #940606;
1087
}
1088

    
1089
.starting-state .indicator1, .starting-state .indicator2, .starting-state .indicator3, .starting-state .indicator4 {
1090
    background-color: #9ed976;
1091
}
1092

    
1093
.network-indicator .indicator1, .network-indicator .indicator2, .network-indicator .indicator3, .network-indicator .indicator4 {
1094
    background-color: #63cf1c;
1095
}
1096

    
1097
.network-indicator.in-progress .indicator1, .network-indicator.in-progress .indicator2, .network-indicator.in-progress .indicator3, .network-indicator.in-progress .indicator4 {
1098
    background-color: #FF7F2A;
1099
}
1100

    
1101
.running, .terminated {
1102
    background: #EFF7FA repeat scroll 0 0;
1103
    padding-bottom: 15px;
1104
}
1105

    
1106
.running, #machinesview-list, .single {
1107
}
1108

    
1109
.terminated {
1110
    background:#DCE5E8  repeat scroll 0 0;
1111
    padding-top: 15px;
1112
    margin-top: 15px;
1113
}
1114

    
1115
span.rename {
1116
    background-repeat: no-repeat;
1117
    color: transparent;
1118
    font-size: 75%;
1119
    font-weight: normal;
1120
    margin-left: 10px;
1121
    padding-left: 10px;
1122
    text-align: left;
1123
    cursor: pointer;
1124
}
1125

    
1126
div.name:hover span.rename, span.rename_hovered {
1127
    color: #3D3D3D;
1128
    margin-top: 0.4em;
1129
    background-image: url(./pencil.png);
1130
    background-position: 0 3px;
1131
}
1132

    
1133
.machine div.info {
1134
    font-size: 75%;
1135
}
1136

    
1137
div.machine:hover div.info-header, div.machine:hover div.toggler div.down {
1138
    background-color: #84b7d0;
1139
}
1140

    
1141
div.machine div.info-label.darker, .single div.tags-label.darker, div.network .darker {
1142
    background-color: #5CA1C0;
1143
}
1144

    
1145
.machine div.info div.info-label {
1146
    font-size: 75%;
1147
    height:16px;
1148
    width: 30px;
1149
    padding: 1px 0 0 5px;
1150
}
1151

    
1152
.machine div.info div.toggler, .single div.tags div.toggler, div.network div.toggler {
1153
    width:15px;
1154
    height:17px;
1155
    margin-top: -11px;
1156
    margin-left: 37px;
1157
}
1158

    
1159
div.network div.toggler {
1160
    margin-left: 90px;
1161
}
1162

    
1163
.machine div.info div.down {
1164
    background: url(/static/down-arrow.png) no-repeat scroll 1px 1px;
1165
}
1166

    
1167
.single div.tags div.down {
1168
    background: url(/static/down-arrow.png) no-repeat scroll 2px 2px;
1169
}
1170

    
1171
.network div.network-machines div.down {
1172
    background: url(/static/down-arrow.png) no-repeat scroll 2px 2px;
1173
}
1174

    
1175
.network div.network-machine div.firewall div.down {
1176
    background: url(/static/down-arrow.png) no-repeat scroll 2px 2px;
1177
}
1178

    
1179
.machine div.info div.up {
1180
    background: url(/static/up-arrow.png) no-repeat scroll 1px 0;
1181
}
1182

    
1183
.single div.tags div.up {
1184
    background: url(/static/up-arrow.png) no-repeat scroll 2px 2px;
1185
}
1186

    
1187
.network div.network-machines div.up {
1188
    background: url(/static/up-arrow.png) no-repeat scroll 2px 2px;
1189
}
1190

    
1191
.network div.network-machine div.firewall div.up {
1192
    background: url(/static/up-arrow.png) no-repeat scroll 2px 2px;
1193
}
1194

    
1195
button {
1196
    background-color: #87AADE;
1197
    border: 1px solid #87AADE;
1198
    color: #FFFFFF;
1199
    cursor: pointer;
1200
    height: 23px;
1201
    width: 120px;
1202
}
1203

    
1204
button.next {
1205
    background-color: #4085A5;
1206
    border-color: #4085A5;
1207
    text-align: right;
1208
}
1209

    
1210
button.next:hover {
1211
    background-color: #7DB4CD;
1212
    border-color: #7DB4CD;
1213
}
1214

    
1215
button.prev {
1216
    background-color: #4085A5;
1217
    border-color: #4085A5;
1218
    margin-left: -1px;
1219
    text-align: left;
1220
}
1221

    
1222
button.prev:hover {
1223
    background-color: #7DB4CD;
1224
    border-color: #7DB4CD;
1225
}
1226

    
1227
.image-logo {
1228
    float: left;
1229
    margin-right: 1em;
1230
    margin-left: 1.5em;
1231
    margin-top: 4px;
1232
}
1233

    
1234
.icon div.image {
1235
    clear: both;
1236
    display: block;
1237
    margin-bottom: 3px;
1238
    margin-top: 3px;
1239
    padding: 5px;
1240
}
1241

    
1242
div#view-select {
1243
    clear: both;
1244
    color: white;
1245
    position: absolute;
1246
    right: 15px;
1247
    top: 15px;
1248
}
1249

    
1250
a.machines_view_link {
1251
    text-decoration: none;
1252
    font-size: 0.7em;
1253
    padding: 4px;
1254
    padding-right: 8px;
1255
    color: #5CA1C0;
1256
    margin-left: 5px;
1257
    background-repeat: no-repeat;
1258
    background-color: #C9DFEA;
1259
}
1260

    
1261
a.machines_view_link span {
1262
    float: left;
1263
}
1264

    
1265
a.machines_view_link span.ico {
1266
    width: 17px;
1267
    height: 15px;
1268
    margin-right: 10px;
1269
    background-position: -36px 0;
1270
}
1271

    
1272
a.machines_view_link:hover {
1273
    background-color: #A1C8DB;
1274
    color: #fff;
1275
}
1276
a.machines_view_link:hover span.ico {
1277
    background-position: -0px 0px;   
1278
}
1279

    
1280
a.machines_view_link.activelink span.ico {
1281
    background-position: -18px 0px;
1282
}
1283
a.machines_view_link.activelink {
1284
    color: #fff;
1285
    background-color: #5CA1C0;
1286
}
1287

    
1288
div#view-select a {
1289
    display: block;
1290
    float: left;
1291
}
1292

    
1293
a#list:hover {
1294
    background: #5f8dd3;
1295
}
1296

    
1297
a#machines_view_icon_link:active, a#machines_view_list_link:active {
1298
    color:white;
1299
}
1300

    
1301
a#machines_view_icon_link span.ico {
1302
    background-image: url(./icon-view.png);
1303
}
1304

    
1305
a#machines_view_list_link span.ico {
1306
    background-image: url(./list-view.png);
1307
}
1308

    
1309
a#machines_view_single_link span.ico {
1310
    background-image: url(./single-view.png);
1311
}
1312

    
1313
#machinetype {
1314
    background-color: #CDE2EC;
1315
    height: 25px;
1316
    margin-bottom: 0px !important;
1317
}
1318

    
1319
div.machine-type {
1320
    float: left;
1321
    margin: 4px 18px 20px;
1322
}
1323

    
1324
.machine-type .active {
1325
    color: #FFFFFF
1326
}
1327

    
1328
div.machine-type label.disabled {
1329
    color: #aaa !important;
1330
}
1331

    
1332
#machinesview {
1333
}
1334

    
1335
#machines-pane {
1336
}
1337

    
1338
.list#machinesview {
1339
    margin-left: -20px;
1340
    display:none;
1341
}
1342

    
1343
#machinesview-list.list {
1344
    background: #EFF7FA  repeat scroll 0 0;
1345
    padding-left: 15px;
1346
    padding-bottom: 15px;
1347
}
1348

    
1349
#machinesview_content {
1350
    display:none;
1351
}
1352

    
1353
.list-machines {
1354
    min-width: 515px;
1355
}
1356

    
1357
#emptymachineslist {
1358
    background-color: #6BA9C6;
1359
    color: #A0A0A0;
1360
    display: none;
1361
    padding: 65px 150px 35px;
1362
    text-align: justify;
1363
    margin-top: -70px;
1364
}
1365

    
1366
#welcomeheader {
1367
    color:white;
1368
    text-align: center;
1369
}
1370

    
1371
.welcomebody {
1372
    color: white;
1373
    font-size:80%;
1374
}
1375

    
1376
.welcomebody a {
1377
    color: white;
1378
}
1379

    
1380
.welcomefooter {
1381
    color: white;
1382
    font-size:60%;
1383
}
1384

    
1385
.welcomefooter a {
1386
    color: white;
1387
}
1388

    
1389
.emptycreatecontainer {
1390
    margin-left: 430px !important;
1391
    position: absolute;
1392
    margin-top: 5px !important;
1393
    width: 180px;
1394
    background-color: #CCCCCC;
1395
    padding: 5px;
1396
    padding-left: 10px;
1397
}
1398

    
1399
.emptycreate {
1400
    margin: 20px 10px 5px 0 !important;
1401
}
1402

    
1403
#createbody {
1404
    display:none;
1405
    font-size: 80%;
1406
}
1407

    
1408
div.list label img {
1409
    margin: 5px 5px -3px 0;
1410
}
1411

    
1412
div.list label {
1413
    color: #3D3D3D;
1414
    font-size: 75%;
1415
}
1416

    
1417
div.list .state {
1418
    margin-top: 7px;
1419
    margin-right: 10px;
1420
}
1421

    
1422
div.list table tbody {
1423
    margin-top: 8px;
1424
}
1425

    
1426
div.list .stopped {
1427
    margin-top: 8px;
1428
}
1429

    
1430
/* root element for tabs  */
1431
#wizard ul.tabs {
1432
    margin-right: -1px;
1433
    float: right;
1434
}
1435

    
1436
#wizard div.panes {
1437
    height: 247px;
1438
    clear:both;
1439
    margin-top: 3px;
1440
}
1441

    
1442
.typebody {
1443
    font-size: 80%;
1444
    font-weight: normal;
1445
    position: relative;
1446
    top: -3px;
1447
}
1448

    
1449
.typehover {
1450
    color: #FFFFFF;
1451
}
1452

    
1453
#label-name {
1454
    margin-top: 10px;
1455
}
1456

    
1457
/* single tab */
1458
#wizard ul.tabs li {
1459
    margin-bottom: 0;
1460
    list-style-type:none;
1461
    float: left;
1462
}
1463

    
1464
/* link inside the tab. uses a background image */
1465
#wizard ul.tabs a {
1466
    display:block;
1467
    padding: 0.2em 0.5em 0.1em 0.4em;
1468
    text-decoration:none;
1469
    color: #FFFFFF;
1470
    position:relative;
1471
    top:1px;
1472
    outline:0;
1473
    background-color: transparent;
1474
    text-align: center;
1475
    width: 100px;
1476
    white-space: nowrap;
1477
    height: 17px;
1478
}
1479

    
1480
#wizard ul.tabs a:hover {
1481
    color: #FFFFFF;
1482
    background-color:#4085A5;
1483
}
1484

    
1485
/* selected tab */
1486
#wizard ul.tabs a.current {
1487
    color: white;
1488
    background-color: #7DB4CD;
1489
    cursor: default;
1490
}
1491

    
1492
#wizard #standard-images {
1493
    background-color: #ECF4F8;
1494
}
1495

    
1496
div.list div.actions {
1497
    display: none;
1498
    clear: left;
1499
    float: right;
1500
    margin-right: 15px;
1501
    margin-top: 37px;
1502
    text-align: right;
1503
    width: 120px;
1504
}
1505

    
1506
div.list div.actions a {
1507
    clear: left;
1508
    color: #A1A1A1;
1509
    display: block;
1510
    font-size:75%;
1511
    margin-bottom: 2px;
1512
}
1513

    
1514
div.list div.actions a:hover {
1515
    background-color: transparent;
1516
}
1517

    
1518
div.list div.actions a.enabled {
1519
    color: #3D3D3D;
1520
}
1521

    
1522
div.list div.actions a.enabled:hover{
1523
    cursor: pointer;
1524
    color: black;
1525
    text-decoration: underline;
1526
}
1527

    
1528
div.list div.actions a.selected {
1529
    color: #FF7F2A !important;
1530
}
1531

    
1532
input.machine {
1533
    width: 13px;
1534
    height: 13px;
1535
    top: -1px;
1536
    overflow: hidden;
1537
}
1538

    
1539
.description-container {
1540
    display: inline-block;
1541
    position: relative;
1542
    width: 300px;
1543
}
1544

    
1545
#wizard .button-container {
1546
    height: 20px;
1547
}
1548

    
1549

    
1550
/* metadata dropdown combo */
1551
.meta-key {
1552
    margin-right: 18px;
1553
    float:left;
1554
}
1555

    
1556
/* notification box */
1557
#yes-no {
1558
    height: 150px;
1559
    z-index: 9999;
1560
    border-bottom: 5px solid #4085A5;
1561
}
1562

    
1563
#yes-no p, #yes-no button {
1564
    margin-top: 15px;
1565
}
1566

    
1567
#error-success, .notification-box {
1568
    z-index: 9999;
1569
    border-bottom: 5px solid #4085A5;
1570
    min-height: 150px;
1571
    top: 50px !important;
1572
    position: absolute;
1573
}
1574

    
1575
#error-success p, .notification-box p {
1576
    margin-top: 5px;
1577
}
1578

    
1579
.error-report {
1580
    display: none;
1581
}
1582

    
1583
#error-success .error-report {
1584
    position: absolute;
1585
    top: 140px;
1586
    right: 40px;
1587
}
1588

    
1589
.error .error-report {
1590
    display: block;
1591
}
1592

    
1593
#error-success .error-report .errormsg {
1594
    display: none;
1595
}
1596

    
1597
#error-success .error-report .success {
1598
    display: none;
1599
}
1600

    
1601
#error-success .error-report .sending {
1602
    display: none;
1603
}
1604

    
1605
#error-success .error-report .send-btn {
1606
    color: #4085A5;
1607
    text-decoration: underline;
1608
    cursor: pointer;
1609
}
1610

    
1611
#error-success strong, .notification-box strong {
1612
    color: #F49C1A;
1613
}
1614

    
1615
#error-success .close, .notification-box .close {
1616
    background-image: url("./close-popup.png");
1617
    background-repeat: no-repeat;
1618
    cursor: pointer;
1619
    height: 13px;
1620
    position: absolute;
1621
    right: 7px;
1622
    top: 9px;
1623
    width: 13px;
1624
}
1625

    
1626
.popup-header-error {
1627
    background-color: #800000 !important;
1628
}
1629

    
1630
.popup-border-error {
1631
    border-color: #800000 !important;
1632
    width:auto;
1633
}
1634

    
1635
.popup-details-error {
1636
    border: none !important;
1637
}
1638

    
1639
.popup-separator-error {
1640
    margin-bottom: 5px !important;
1641
}
1642

    
1643
#error-success .popup-header, .notification-box .popup-header {
1644
    background-color: #4085A5;
1645
    color: white;
1646
    font-size: 95%;
1647
    font-weight: normal;
1648
    height: 20px;
1649
    margin-left: -16px;
1650
    margin-top: -16px;
1651
    padding-bottom: 2px;
1652
    padding-left: 30px;
1653
    padding-top: 10px;
1654
    width: 482px;
1655
    margin-right:-16px;
1656
}
1657

    
1658

    
1659
#error-success.success h3 span.header-box, .notification-box h3 span.header-box {
1660
    background-color: #71c837;
1661
    display: block;
1662
    background-image: url("./save-green.png");
1663
    background-position: right 0;
1664
    background-repeat: no-repeat;
1665
    width: 80px;
1666
    padding: 3px 3px 3px 8px;
1667
    margin-top: -6px;
1668
    font-size: 90% !important;
1669
    margin-left: -11px;
1670
}
1671

    
1672
#error-success .popup-body, .notification-box .popup-body {
1673
    background: url("./popup-bg.png") repeat-x scroll 0 0 transparent;
1674
    margin-left: -16px;
1675
    margin-right: -16px;
1676
    margin-top: 1px;
1677
    min-height: 142px;
1678
    padding-top: 10px;
1679
}
1680

    
1681
#error-success .popup-body-inner, .notification-box .popup-body-inner {
1682
    background: url("./popup-inner-bg.png") repeat-x scroll 0 0 transparent;
1683
    font-size: 80%;
1684
    min-height: 120px;
1685
    margin-left: 20px;
1686
    padding-left: 15px;
1687
    width: 460px;
1688
}
1689

    
1690
#error-success .popup-separator, .notification-box .popup-seperator {
1691
    background-color: #74AEC9;
1692
    height: 1px;
1693
    font-size:1%;
1694
    width: 442px;
1695
    margin-bottom: 30px;
1696
}
1697

    
1698
#error-success .machine-now-building {
1699
    font-size: 95%;
1700
    padding-bottom: 7px;
1701
    padding-top: 10px;
1702
}
1703

    
1704
#error-success.success .machine-now-building {
1705
    padding-bottom: 14px !important;
1706
}
1707

    
1708
#error-success .password-container, .notification-box .password-container {
1709
    width: 430px;
1710
    padding: 5px;
1711
    border: 2px solid #75b54a;
1712
    background-color: #aade87;
1713
}
1714

    
1715
#error-success .password-header, .notification-box .password-header {
1716
    margin-bottom: 5px;
1717
}
1718

    
1719
#error-success .password, .notification-box .password {
1720
    color: #447821;
1721
}
1722

    
1723
#error-success .popup-details, .notification-box .popup-details {
1724
    border: 2px solid #FF7F2A;
1725
    float: left;
1726
    margin-left: 10px;
1727
    padding: 2px;
1728
}
1729

    
1730
#error-success.success .popup-details, .notification-box .popup-details {
1731
    border: none !important;
1732
    float: none !important;
1733
    margin-left: none !important;
1734
    margin-top: 10px;
1735
}
1736

    
1737
#error-success.success .popup-separator, .notification-box .popup-seperator {
1738
    margin-bottom: 14px !important;
1739
}
1740

    
1741
#error-success .write-password, .notification-box .write-password {
1742
    margin-bottom: 5px;
1743
    padding-left: 30px;
1744
}
1745

    
1746
#error-success .write-password-password, .notification-box .write-password-password {
1747
    padding-left: 30px;
1748
    color: #447821;
1749
    display: inline;
1750
    font-size: 110%;
1751
    font-weight: bold;
1752
}
1753

    
1754
#error-success .write-password-details, .notification-box .write-password-details {
1755
    font-size: 75%;
1756
}
1757

    
1758
.more-details {
1759
    display: block;
1760
}
1761

    
1762
.notification-box h3 span.header-box {
1763
    background: transparent;
1764
}
1765

    
1766
.notification-box .machine-now-building {
1767
    padding: 20px 0;
1768
}
1769

    
1770
.notification-box .header-box {
1771
    width: auto !important;
1772
}
1773

    
1774
.notification-box .password {
1775
    text-align: center;
1776
}
1777
.notification-box .password a:hover {
1778
    background-color: #447821;
1779
    color: #fff;
1780
}
1781

    
1782
.notification-box .password a {
1783
    padding: 0.2em;
1784
    text-align: center;
1785
    color: #447821;
1786
    font-weight: bold;
1787
    font-size: 1.2em;
1788
    text-decoration: none;
1789
}
1790

    
1791
.popup-details a:link, .popup-details a:visited{
1792
    color: black;
1793
}
1794

    
1795
/* Confirmation boxes */
1796
div.confirm_single, div.confirm_multiple, div.action_error {
1797
    display: none;
1798
    color: black;
1799
}
1800

    
1801
div.confirm_single button, div.confirm_multiple button, div.action_error button {
1802
    font-size: 100%;
1803
    cursor: pointer;
1804
    color: black;
1805
    height: 20px !important;
1806
}
1807

    
1808
div.confirm_single button {
1809
    border: none;
1810
}
1811

    
1812
div.confirm_single button.yes {
1813
    width: 90px;
1814
    background-color:#FF7F2A;
1815
}
1816

    
1817
div.confirm_single button.yes:hover {
1818
    background-color: #FF9955;
1819
}
1820

    
1821
div.confirm_single button.no {
1822
    width: 20px;
1823
    margin-left:-5px;
1824
    background-color: #FF9955;
1825
    color:#d95d0a;
1826
}
1827

    
1828
div.confirm_single button.no:hover {
1829
    color: white;
1830
}
1831

    
1832
div.confirm_multiple_cont {
1833
    background-color: #406A7D;
1834
    margin-top: 0px;
1835
    padding: 3px;
1836
    border-top: 1px solid #444;
1837
    border-bottom: 1px solid #444;
1838
    padding-top:0px;
1839
    margin-top: -1px;
1840
}
1841

    
1842
div.confirm_reboot_required {
1843
}
1844

    
1845
div.confirm_multiple {
1846
    font-size: 65%;
1847
    z-index: 8000;
1848
    /*height: 28px;*/
1849
    width: 700px;
1850
    margin-top: 15px;
1851
}
1852

    
1853
div.confirm_multiple p {
1854
    float: left;
1855
    color: #FFF;
1856
    font-weight: bold;
1857
    margin: 7px 0 0 10px;
1858
}
1859

    
1860
#networks-pane {
1861
    display: none;
1862
}
1863

    
1864
#networks-pane div.confirm_multiple p {
1865
    margin: 7px 0 0 100px;
1866
}
1867

    
1868
div.confirm_multiple button {
1869
    float: right;
1870
    background-color: transparent;
1871
    border: 1px solid #5CA1C0;
1872
    margin: 4px 5px 0 0;
1873
}
1874

    
1875
div.confirm_multiple button.yes {
1876
    border-color: #FF7F2A;
1877
    padding: 0 12px;
1878
}
1879

    
1880
div.confirm_multiple button.yes:hover {
1881
    background-color: #FF7F2A;
1882
}
1883

    
1884
div.confirm_multiple button.no {
1885
    padding: 0px 16px;
1886
}
1887

    
1888
div.confirm_multiple button.no:hover {
1889
    background-color: #5CA1C0;
1890
}
1891

    
1892
div.action_error {
1893
    width: 80px;
1894
    height: 60px;
1895
    padding: 5px;
1896
    margin: -2px 0 0 595px;
1897
    background-color: #4085A5;
1898
    font-size: 75%;
1899
    line-height: 1.5;
1900
    z-index:1;
1901
    color: #FF7F2A;
1902
    position:absolute;
1903
    top: 0px;
1904
}
1905

    
1906
.action_error button {
1907
    width: 80px !important;
1908
    background-color: transparent;
1909
    border: 1px solid;
1910
    padding: 0px;
1911
    border-color: #FF7F2A;
1912
}
1913

    
1914
div.action_error button.details {
1915
    margin: 5px 0 0 0px;
1916
    padding: 0 15px;
1917
}
1918

    
1919
div.action_error button.details:hover {
1920
    background-color: #FF7F2A;
1921
}
1922

    
1923
div#aboutuser{
1924
    float:right;
1925
    clear: both;
1926
    color: #FFFFFF;
1927
    font-size: 75%;
1928
    margin-top: -25px;
1929
}
1930

    
1931
div#user{
1932
    clear: both;
1933
    color: #FFFFFF;
1934
    font-size: 75%;
1935
    margin-top: 38px;
1936
    padding-bottom: 10px;
1937
    z-index: 500;
1938
    position: absolute;
1939
    right:0;
1940
}
1941

    
1942
div#user a{
1943
    color: #FFFFFF;
1944
    text-decoration: none;
1945
}
1946

    
1947
div#user a.current_lang {
1948
    color: #72ADC8;
1949
}
1950

    
1951
div#user .usermenu {
1952
    float: left;
1953
    cursor: pointer;
1954
    overflow: hidden;
1955
    padding-top: 5px;
1956
    margin-top: -5px;
1957
    position: relative;
1958
}
1959

    
1960
div#user .username {
1961
    display: block;
1962
    margin-right: 10px;
1963
    padding-right: 18px;
1964
    padding-left: 4em;
1965
    height: 20px;
1966
    background: url("./down-arrow-light.png") no-repeat right;
1967
    background-position: right 6px;
1968
    font-weight: normal;
1969
}
1970

    
1971
div#user .hovered {
1972
    background: #599EBD;
1973
    overflow: visible;
1974
    border-bottom: 1px solid #C7DFE9;
1975
}
1976

    
1977
div#user .hovered .username {
1978
    background-image: url("./down-arrow-lighter.png");
1979
}
1980

    
1981
div#user .active {
1982
    background-color: #BED5E0 !important;
1983
}
1984

    
1985
div#user .active .username {
1986
    color: #599EBD;
1987
    background-image: url("./down-arrow-lighter.png");
1988
}
1989

    
1990
div#user .useractions {
1991
    display: none;
1992
}
1993

    
1994
div#user .active .useractions {
1995
    display: block;
1996
    text-align: right;
1997
    color: #4085A5;
1998
    background-color: #D0E3ED;
1999
    margin-top:-1px;
2000
    border-top:1px solid #fff;
2001
    position: relative;
2002
    top: 1px;
2003
    box-shadow: 1px 1px 1px #aaa;
2004
    -moz-box-shadow: 1px 1px 1px #aaa;
2005
    -webkit-box-shadow: 1px 1px 1px #aaa;
2006
    z-index: 2000;
2007
}
2008

    
2009
div#user .useractions li {
2010
    padding: 2px 10px;
2011
    border-bottom: 1px solid #efefef;
2012
    text-align: right;
2013
    display: block;
2014
    background-color: transparent;
2015
}
2016

    
2017
div#user .useractions li a {
2018
    color: #4085A5;
2019
    display: inline-block;
2020
    padding:5px 0;
2021
    padding-left: 30px;
2022
    padding-bottom: 6px;
2023
    background-repeat: no-repeat;
2024
    background-position: center left;
2025
}
2026

    
2027
div#user .useractions li.hovered {
2028
    background-color: #E1EFF6;
2029
}
2030

    
2031
div#user .useractions li.last {
2032
    border-bottom: none;
2033
}
2034

    
2035
div#user .useractions .logout a {
2036
    background-image: url("./icon-logout.png");
2037
}
2038

    
2039
div#user .langmenu {
2040
    float: left;
2041
    border-left: 1px solid #ffffff;
2042
    padding-left: 10px;
2043
    margin-left: -1px;
2044
}
2045

    
2046
div#user .langmenu .sep {
2047
    display: inline-block;
2048
    color: #72ADC8;
2049
}
2050

    
2051
.separator {
2052
    background-color: #74AEC9;
2053
    height: 10px;
2054
    width: 700px;
2055
    font-size: 1px;
2056
    line-height: 0px;
2057
}
2058

    
2059
#disks.separator {
2060
    background-color: #dea842;
2061
}
2062

    
2063
#networks.separator {
2064
    background-color: #6c535d;
2065
}
2066

    
2067
.network-machine h5 {
2068
    margin-bottom: 26px;
2069
    margin-top:0px;
2070
}
2071

    
2072
.machine-container .separator {
2073
    width: 508px;
2074
    height: 1px;
2075
    margin-top: 2px;
2076
    background-color: #5CA1C0;
2077
    margin-left: 13px;
2078
}
2079

    
2080
.editbuttons {
2081
    display: block;
2082
    clear: none;
2083
    width: 40px;
2084
    margin-right: 0px;
2085
    padding-top: 2px;
2086
    float: right;
2087
    cursor: pointer;
2088
    position: relative;
2089
    z-index: 1000;
2090
}
2091

    
2092
div.editbuttons div.save:hover, div.editbuttons div.cancel:hover {
2093
    background-color: #84b7d0;
2094
}
2095

    
2096
div.editbuttons div.cancel:hover {
2097
    background-image: url("./cancel-onhover.png");
2098
}
2099

    
2100
.editbuttons .cancel, .editbuttons .save {
2101
    background-repeat: no-repeat;
2102
    color: transparent;
2103
    height: 16px;
2104
    width: 16px;
2105
    float: left;
2106
}
2107

    
2108
.editbuttons .cancel {
2109
    background-image: url("./cancel.png");
2110
    margin-left: 3px;
2111
}
2112

    
2113
.editbuttons .save {
2114
    background-image: url("./save.png");
2115
    margin-left: 1px;
2116
}
2117

    
2118
.editbuttons img {
2119
    float:none !important;
2120
    margin: 0px !important;
2121
}
2122

    
2123
.network .namecontainer {
2124
    font-size: 1.1em;
2125
}
2126
.network .machine-name-div .namecontainer {
2127
    font-size: 1em;
2128
    font-weight: bold;
2129
}
2130

    
2131

    
2132
.namecontainer .name {
2133
    position: relative;
2134
}
2135

    
2136
.namecontainer .name .nametextbox, .network-rename-input {
2137
    z-index: 1000;
2138
}
2139

    
2140
.nametextbox, .network-rename-input {
2141
    font-size: 65%;
2142
    width: 240px;
2143
}
2144

    
2145
.large-spinner {
2146
    background: url("./icons/indicators/large/progress.gif");
2147
    margin-left: 298px;
2148
    margin-top: 0px;
2149
    height: 31px;
2150
    width: 49px;
2151
    position: absolute;
2152
    top: 200px;
2153
}
2154

    
2155
#machinesview-icon .large-spinner {
2156
    top: 170px;
2157
}
2158

    
2159
.list .large-spinner {
2160
    margin-top:-30px;
2161
}
2162

    
2163
.single .large-spinner {
2164
    margin-top: 50px;
2165
}
2166

    
2167
div#networks-container {
2168
    display: none;
2169
}
2170

    
2171
div#networks-container .large-spinner {
2172
    margin-top: 50px;
2173
}
2174

    
2175
/* tables in list view */
2176
div.list div.dataTables_filter {
2177
    font-size: 75%;
2178
    margin-bottom: 12px;
2179
}
2180

    
2181
div.list div.dataTables_filter input{
2182
    font-size: 100%;
2183
}
2184

    
2185
.dataTables_wrapper {
2186
    width: 515px;
2187
    padding-bottom: 40px;
2188
}
2189

    
2190
div.list table thead .sorting, div.list table thead .sorting_desc, div.list table thead .sorting_asc {
2191
    padding-right: 15px !important;
2192
}
2193

    
2194
div.list table {
2195
    width: 515px;
2196
    font-size: 75%;
2197
}
2198

    
2199
div.list table tbody td {
2200
    color: #3D3D3D;
2201
    padding:6px;
2202
    vertical-align: middle;
2203
}
2204

    
2205
div.list table thead tr th {
2206
    background-color: #CDE2EC;
2207
    background-image: url(bg.gif);
2208
    background-repeat: no-repeat;
2209
    background-position: right 11px;
2210
    font-weight: normal;
2211
    border: 1px solid transparent;
2212
    border-bottom: none;
2213
    padding: 4px;
2214
    text-align: left;
2215
    vertical-align: middle;
2216
    cursor: pointer;
2217
}
2218

    
2219
div.list table thead .sorting_asc, div.list table thead .sorting_desc {
2220
    background-color: #5CA1C0;
2221
}
2222

    
2223
div.list table thead .sorting_asc {
2224
    background-image: url(asc.gif);
2225
}
2226

    
2227
div.list table thead .sorting_desc {
2228
    background-image: url(desc.gif);
2229
}
2230

    
2231
div.list table .selection div.expand-icon {
2232
    background-image: url(asc.gif);
2233
    background-repeat: no-repeat;
2234
    position: relative;
2235
    cursor: pointer;
2236
    width: 15px;
2237
    height: 4px;
2238
    left: 19px;
2239
    top: -11px;
2240
}
2241

    
2242
ul.dropdown-selector {
2243
    background-color: #E6EEEE;
2244
    position: absolute;
2245
    margin-left: 1px;
2246
    display: block;
2247
    top: 255px;
2248
    font-size:75%;
2249
    width:40px;
2250
}
2251

    
2252
ul.dropdown-selector li {
2253
    padding: 4px;
2254
}
2255

    
2256
ul.dropdown-selector li:hover {
2257
    background-color: #5CA1C0;
2258
}
2259

    
2260
ul.dropdown-selector li a{
2261
    color: black;
2262
    text-decoration: none;
2263
}
2264

    
2265
div.list table span.imagetag {
2266
    display: none;
2267
}
2268

    
2269
div.list table thead .vmos {
2270
    width: 20px !important;
2271
    vertical-align:middle;
2272
}
2273

    
2274
div.list table .selection {
2275
    width: 20px !important;
2276
    text-align: left;
2277
    background-image: none;
2278
    padding-left: 6px;
2279
}
2280

    
2281
div.list table thead .vmflavor {
2282
    width: 100px !important;
2283
}
2284

    
2285
/* group column commented out for v0.5
2286
div.list table thead .vmgroup {
2287
    width: 40px !important;
2288
}
2289
*/
2290

    
2291
div.list table thead .vmstatus {
2292
    width: 50px !important;
2293
}
2294

    
2295
div.list table thead .vmname {
2296
    width: 110px !important;
2297
}
2298

    
2299
.spinner, .action-indicator {
2300
    clear: right;
2301
    float:right !important;
2302
    margin: 10px 6px 0 15px !important;
2303
}
2304

    
2305
.icon .spinner {
2306
    margin: 20px 15px 0 15px !important;
2307
}
2308

    
2309
.single .state .spinner {
2310
    margin: 20px 55px 0 15px !important;
2311
}
2312

    
2313
.action-indicator {
2314
    margin-right: 18px !important;
2315
}
2316

    
2317
.wave {
2318
    clear: right;
2319
    float:right !important;
2320
    margin: 10px 15px 0 15px !important;
2321
}
2322

    
2323
#networks-pane .spinner {
2324
    margin-top: 18px !important;
2325
}
2326

    
2327
.hidden {
2328
    display:none;
2329
}
2330

    
2331
div.actions a.selected, div.actions a.selected:hover, div.machine-actions a.selected, div.machine-actions a.selected:hover {
2332
    display:block !important;
2333
}
2334

    
2335
.action_error .message, .action_error .code {
2336
    display: none;
2337
}
2338

    
2339
.fixed {
2340
    bottom: 0;
2341
    position: fixed !important;
2342
}
2343

    
2344
/* Networks */
2345
#networks-pane {
2346
    background-color: transparent;
2347
    color: black;
2348
}
2349

    
2350
#networkscreate {
2351
}
2352

    
2353
.createbutton {
2354
    color: black;
2355
    background-color: #FF7F2A;
2356
    cursor: pointer;
2357
    padding: 7px 24px;
2358
    text-decoration: none;
2359
    border-left: 15px solid #FF9955;
2360
    margin-left: -15px;
2361
}
2362

    
2363
#networkscreate:hover {
2364
    background-color: #FF9955;
2365
}
2366

    
2367
#createcontainer {
2368
}
2369

    
2370
#networks-container {
2371
}
2372

    
2373
#networks-pane .public-networks {
2374
    background: #EFF7FA repeat scroll 0 0;
2375
    margin: 0 0 0px;
2376
    padding: 0 0 15px 0px;
2377
}
2378

    
2379
#networks-pane .private-networks .network:last-child {
2380
    border-bottom: none;
2381
}
2382

    
2383
#networks-pane .private-networks {
2384
    background: #EFF7FA repeat scroll 0 0;
2385
    padding: 15px 20px 20px 0px;
2386
    margin-top: 18px;
2387
}
2388

    
2389
.private-networks .network-cont:last-child {
2390
    border-bottom: none;
2391
}
2392

    
2393
.private-networks .network-cont {
2394
    border-bottom: 1px solid #D1E7F0;
2395
    padding-bottom:5px;
2396
    margin-bottom: 5px;
2397
    width: 520px;
2398
}
2399

    
2400
.private-networks .network {
2401
    padding-top: 10px;
2402
    padding-bottom: 10px;
2403
}
2404

    
2405
#public-template, #private-template, #public-machine-template, #private-machine-template {
2406
    display:none;
2407
}
2408

    
2409
div.network a.action-network-add {
2410
    display: none;
2411
}
2412

    
2413
div.network a.action-network-destroy {
2414
    margin-top: 32px !important;
2415
    width: 50px;
2416
    display: none;
2417
}
2418

    
2419
div.network {
2420
    clear: both;
2421
    padding: 5px 20px 5px 20px;
2422
    width: 480px;
2423
    position: relative;
2424
}
2425

    
2426
#private-template {
2427
    margin: 2px 0 0 -30px;
2428
}
2429

    
2430
div.network-placeholder {
2431
    margin-left: 33px;
2432
}
2433

    
2434
div.private-networks div.network-placeholder {
2435
}
2436

    
2437
div.network-cable {
2438
    border-left: 3px solid #FF7F2A;
2439
    float: left;
2440
    margin-left: -40px;
2441
    margin-top: -45px;
2442
    height: 185px;
2443
    overflow: hidden;
2444
}
2445

    
2446
.first div.network-cable {
2447
    height:143px;
2448
    margin-top:-6px;
2449
    position: relative;
2450
}
2451

    
2452
div.network-contents div.machines-list div.first {
2453
    margin-top:0;
2454
}
2455

    
2456
.last div.network-cable {
2457
    height:85px;
2458
}
2459

    
2460
div.firewall-cable {
2461
    border-left: 3px solid #FF7F2A;
2462
    float: left;
2463
    margin-left: -100px;
2464
    margin-top: -20px;
2465
    height: 110px;
2466
}
2467

    
2468
.last div.firewall-cable {
2469
    display:none;
2470
}
2471

    
2472
div.network a:hover {
2473
    text-decoration: underline;
2474
    cursor: pointer;
2475
}
2476

    
2477
#networks-container .name {
2478
    font-size: 75%;
2479
}
2480

    
2481
div.network-machines, div.firewall {
2482
    font-size: 75%;
2483
    margin-left: 70px;
2484
}
2485

    
2486
div.firewall {
2487
    margin-left: 60px;
2488
    margin-bottom: 3px;
2489
    margin-top: -3px;
2490
}
2491

    
2492
div.machines-header, div.firewall-header {
2493
    background-color: #A1C8DB;
2494
    color: white;
2495
    cursor: pointer;
2496
    height: 17px;
2497
    width: 103px;
2498
}
2499

    
2500
 div.private-networks div.machines-header {
2501
    margin-top: -5px;
2502
}
2503

    
2504
div.network:hover div.machines-header, div.network:hover div.firewall-header {
2505
    background-color: #84b7d0;
2506
}
2507

    
2508
div.network-machine:hover div.firewall-header {
2509
    background-color: #5CA1C0;
2510
}
2511

    
2512
div.firewall-label.darker {
2513
    background-color: #4085a5;
2514
}
2515

    
2516
.state {
2517
}
2518

    
2519
.network .state {
2520
    font-size: 75%;
2521
    position: absolute;
2522
    right: 10px;
2523
    top: 10px;
2524
}
2525

    
2526
div.network div.actions {
2527
    float: right;
2528
    font-size: 75%;
2529
    font-weight: normal;
2530
    height: 70px;
2531
    width: 100px;
2532
    position: absolute;
2533
    right: -100px;
2534
    top: 0;
2535
}
2536

    
2537
div.network div.machine-actions {
2538
    text-decoration: none;
2539
    float: right;
2540
    margin: -17px -175px 0 0;
2541
    font-weight: normal;
2542
    font-size: 75%;
2543
}
2544

    
2545
div.network div.actions a, div.network div.machine-actions a {
2546
    text-decoration: none;
2547
    height: 15px;
2548
    color: black;
2549
    visibility: hidden;
2550
    display: block;
2551
}
2552

    
2553

    
2554
div.network div.machine-actions a {
2555
    margin: 8px 0 0 8px;
2556
}
2557
div.network div.net-actions a {
2558
    margin: 0 0 8px 8px;
2559
    width: 168px;
2560
}
2561
div.network div.action-container {
2562
    bottom: auto;
2563
}
2564

    
2565
div.network div.net-actions .confirm_single {
2566
    position: absolute;
2567
    left: 95px;
2568
    width: 200px;
2569
    margin: 0 0px -5px 0;
2570
    font-size: 100%;
2571
}
2572

    
2573
div.network div.actions a:hover, div.network div.machine-actions a:hover {
2574
    display: block;
2575
    background-color:#A1C8DB;
2576
    opacity: 0.8;
2577
    filter: alpha(opacity = 80);
2578
}
2579

    
2580
div.network.expand .net-actions a {
2581
    visibility: visible;
2582
}
2583

    
2584
div.network:hover div.actions a, div.network-machine:hover div.machine-actions a {
2585
    visibility: visible;
2586
}
2587

    
2588
div.network div.actions a.selected:hover, div.network div.machine-actions a.selected {
2589
    background-color: transparent !important;
2590
    visibility: visible!important;
2591
}
2592

    
2593
div.network .net-vm-actions .confirm_single {
2594
    font-size: 100% !important;
2595
    margin-right: -25px !important;
2596
    position: absolute !important;
2597
    top: 7px;
2598
    right:0;
2599
}
2600

    
2601
div.network div.display a {
2602
    visibility: visible;
2603
}
2604

    
2605
div.network-machine div.machine-actions a.action-details {
2606
    margin-top: 7px;
2607
    width: 168px;
2608
}
2609

    
2610
div.network .net-actions {
2611
    margin-right:5px !important;
2612
    margin-top:0px !important;
2613
    height: 80px !important;
2614
}
2615

    
2616
div.network .net-actions .action-container.destroy {
2617
    position: relative;
2618
    bottom: auto;
2619
}
2620

    
2621
div.network:hover {
2622
    background-color: #A1C8DB !important;
2623
}
2624

    
2625
.network-logos {
2626
    float:left;
2627
    padding-right: 10px;
2628
}
2629

    
2630
.network-logos:hover {
2631
    cursor: pointer;
2632
}
2633

    
2634
.state div {
2635
    text-align: right;
2636
    margin: 4px 1px -4px;
2637
}
2638

    
2639
.public-networks .state div {
2640
    margin-top: 4px;
2641
}
2642

    
2643
.private-networks .state div {
2644
    margin-top: 9px;
2645
    margin-bottom: -12px;
2646
}
2647

    
2648
.network .name-div {
2649
    margin-bottom: 15px;
2650
    margin-top: 0px;
2651
}
2652

    
2653
div.indicator {
2654
    clear: none;
2655
    float: right;
2656
    height: 11px;
2657
    margin: 3px -1px;
2658
    width: 10px;
2659
}
2660

    
2661
#private-networks {
2662
    margin-top: 20px;
2663
}
2664

    
2665
.private-networks .editbuttons {
2666
    margin-right: 117px;
2667
    margin-top: 1px;
2668
}
2669

    
2670
.private-networks div.confirm_single {
2671
    margin: 45px -219px -5px 0;
2672
    font-size: 80%;
2673
}
2674

    
2675
.private-networks .network-machine div.confirm_single {
2676
    margin: 0 -199px 0 0;
2677
}
2678

    
2679
.private-networks .state {
2680
}
2681

    
2682
.private-networks div.machines-list {
2683
    padding-top: 3px;
2684
}
2685

    
2686
span.rename-network, span.configure {
2687
    background-repeat: no-repeat;
2688
    color: transparent;
2689
    font-size: 75%;
2690
    font-weight: normal;
2691
    margin-left: 10px;
2692
    padding-left: 10px;
2693
    text-align: left;
2694
}
2695

    
2696
span.rename-network {
2697
    cursor: pointer;
2698
}
2699

    
2700
div.name-div:hover span.rename-network {
2701
    color: #3D3D3D;
2702
    margin-top: 0.4em;
2703
    background-image: url(./pencil.png);
2704
    background-position: 0 3px;
2705
}
2706

    
2707
div.network:hover a.rename {
2708
    color: #3d3d3d;
2709
}
2710

    
2711
.network-separator {
2712
    background-color: #5CA1C0;
2713
    height: 1px;
2714
    margin: 2px 0 0 -5px;
2715
    width: 480px;
2716
    font-size: 1%;
2717
    line-height: 1px;
2718
}
2719

    
2720
.network-contents {
2721
    margin-left: -4px;
2722
    width: 504px;
2723
    clear: both;
2724
    background: url("./orange-border.png") no-repeat;
2725
    background-position: 33px bottom;
2726
}
2727
.network-contents.last-expanded {
2728
    background-position-y: -2600px;
2729
}
2730

    
2731
.network-machine {
2732
    border-bottom: 1px solid #5CA1C0;
2733
}
2734
.network-machine:last-child {
2735
    border-bottom: none;
2736
}
2737

    
2738
.network-machine .state div {
2739
    text-align: left;
2740
}
2741

    
2742
.network-machine {
2743
    margin-left: 35px;
2744
    padding-bottom: 10px;
2745
    padding-left: 5px;
2746
    padding-top: 10px;
2747
    position: relative;
2748
}
2749

    
2750
.network-machine .ips {
2751
    position: absolute;
2752
    right:0;
2753
    top:40px;
2754
    text-align: right;
2755
    padding-right: 10px;
2756
    font-size: 70%;
2757
}
2758

    
2759
.network-machine .logo {
2760
    float:left;
2761
    padding-right: 10px;
2762
    position:relative;
2763
}
2764

    
2765
#networks-container .machine-name {
2766
    text-decoration: none !important;
2767
    margin-bottom: 10px;
2768
    color: #000000;
2769
    margin-top: -4px;
2770
}
2771

    
2772
.private-networks .separator {
2773
    background-color: #5CA1C0;
2774
    height: 1px;
2775
    margin: 3px 0 -2px -10px;
2776
    width: 485px;
2777
}
2778

    
2779
.network-machine .state {
2780
    margin-right: 18px;
2781
}
2782

    
2783
.network-machine .state .status {
2784
    margin-bottom: 4px;
2785
}
2786

    
2787
.machine-name .name {
2788
}
2789

    
2790
.machine-name .namecontainer {
2791
    line-height: 18px;
2792
    margin-bottom: 20px;
2793
}
2794

    
2795
div.network-machine:hover {
2796
    background-color: #84B7D0;
2797
}
2798

    
2799
.machines {
2800
    width: 416px;
2801
    margin-bottom: -8px;
2802
    margin-top: 10px;
2803
}
2804

    
2805
div.empty-network-slot {
2806
    height: 60px;
2807
}
2808

    
2809
div.network-remove-machine, div.network-add-machine {
2810
    background-color: #FB822F;
2811
    color: #bc4b00;
2812
    width:90px;
2813
    height:18px;
2814
    float:left;
2815
    margin:40px 0 0 -100px;
2816
}
2817

    
2818
span.remove-icon {
2819
    font-size: 80%;
2820
    margin-left: 15px;
2821
    position: relative;
2822
    bottom:1px;
2823
}
2824

    
2825
div.add-icon {
2826
    margin-left: 15px;
2827
    margin-top: -1px;
2828
    cursor: pointer;
2829
}
2830

    
2831
span.remove-icon:hover, span.add-icon:hover {
2832
    cursor:pointer;
2833
    color: #fff;
2834
}
2835

    
2836
div.network-add-machine {
2837
    margin:43px 0 0 -3px;
2838
}
2839

    
2840
.firewall-on {
2841
    color: #42E342;
2842
}
2843

    
2844
.firewall-off {
2845
    color: #F82E2E;
2846
}
2847

    
2848
.firewall-content {
2849
    color: black;
2850
    font-size: 60%;
2851
    margin-left: 60px;
2852
    height: 55px;
2853
    margin-bottom: 17px;
2854
}
2855

    
2856
.firewall-content .checkbox-legends {
2857
    cursor: pointer;
2858
}
2859

    
2860
.firewall-content .checkbox-legends.current {
2861
    font-weight: bold;
2862
}
2863

    
2864
.firewall-content .checkbox-legends {
2865
    vertical-align: text-top;
2866
}
2867

    
2868
.checkbox-legends a {
2869
    color: black;
2870
    text-decoration: underline;
2871
    font-size: 100%;
2872
}
2873

    
2874
h5.machine-connect {
2875
    font-size: 75%;
2876
    margin-bottom: 3px;
2877
}
2878

    
2879
.machine-connect span {
2880
    text-decoration: underline;
2881
}
2882

    
2883
h5.machine-connect span:hover {
2884
    cursor: pointer;
2885
}
2886

    
2887
.firewall-apply {
2888
    background-color: #4085a5;
2889
    border: medium none;
2890
    float: right;
2891
    font-size: 105%;
2892
    height: 18px;
2893
    margin-right: 5px;
2894
    margin-top: 3px;
2895
    width: 75px;
2896
}
2897

    
2898
.firewall-apply:hover {
2899
    background-color:#5CA1C0;
2900
}
2901

    
2902
.name-div {
2903
    margin: -9px 0 30px 70px;
2904
}
2905

    
2906
.machine-name-div {
2907
    margin-bottom: 20px;
2908
    margin-left: 60px;
2909
}
2910

    
2911
div.reboot-dialog {
2912
    display: none;
2913
    color: black;
2914
    background-color: #4085A5;
2915
    font-size: 75%;
2916
    margin-top: 15px;
2917
    width: 698px;
2918
    z-index: 1;
2919
}
2920

    
2921
div#reboot-machine-template, div.reboot-machine-entry {
2922
    display: none;
2923
    padding: 0 0 10px 35px;
2924
    width: 300px;
2925
}
2926

    
2927
div.reboot-dialog p {
2928
    color: #FFFFFF;
2929
    padding: 10px 0 10px 10px;
2930
}
2931

    
2932
div.reboot-dialog button {
2933
    float:right;
2934
    border: 1px solid #FF7F2A;
2935
    background-color: transparent;
2936
    font-size:100%;
2937
}
2938

    
2939
div.reboot-dialog button:hover {
2940
    background-color: #FF7F2A;
2941
}
2942

    
2943
div.reboot-dialog button.reboot-all {
2944
    margin: -30px 35px 0 0;
2945
}
2946

    
2947
div.reboot-dialog button.reboot-single {
2948
    color: black;
2949
    margin-top: -20px;
2950
}
2951

    
2952
div.reboot-dialog div.code, div.reboot-dialog div.action, div.reboot-dialog div.message, div.reboot-dialog button.details {
2953
    display:none;
2954
}
2955

    
2956
div.reboot-dialog button.details {
2957
    border-color: #800000;
2958
    margin-top: -20px;
2959
}
2960

    
2961
div.reboot-dialog button.details:hover {
2962
    background-color: #800000;
2963
}
2964

    
2965
/* Metadata */
2966
.machine .info-content {
2967
    display: none;
2968
}
2969

    
2970
.metadata-container {
2971
    line-height: 12px;
2972
    height: 85px;
2973
    background-color: #84b7d0;
2974
}
2975

    
2976
.metadata-column {
2977
    border-right: 1px solid #5CA1C0;
2978
    color: black;
2979
    float: left;
2980
    font-size: 60%;
2981
    margin-top: 3px;
2982
    height: 70px;
2983
    padding-bottom: 5px;
2984
}
2985

    
2986
.vm-stats {
2987
    padding-left: 10px;
2988
    padding-right: 5px;
2989
    width: 220px;
2990
}
2991

    
2992
.vm-stats div.stat-content {
2993
    height: 18px;
2994
}
2995

    
2996
.vm-stats div.stat-content img {
2997
    margin: 0;
2998
}
2999

    
3000
.vm-stats div img.stat-busy {
3001
    margin-top: -7px;
3002
    margin-left: 90px;
3003
}
3004

    
3005
.vm-stats div.stat-content img.busy {
3006
    margin-left: 95px;
3007
}
3008

    
3009
.vm-stats div.stat-error {
3010
    display:none;
3011
}
3012

    
3013
div.stat-error {
3014
    color: #f00;
3015
}
3016

    
3017
.single div.stat-error {
3018
    text-align: center;
3019
    font-size: 0.8em;
3020
}
3021

    
3022
.metadata-column {
3023
    margin-top: 4px;
3024
}
3025

    
3026
.vm-details {
3027
    width: 130px;
3028
    margin-left:17px;
3029
}
3030

    
3031
.vm-details.metadata-column {
3032
    padding-top: 5px;
3033
    height: 65px;
3034
}
3035

    
3036
.vm-details .image-details {
3037
    margin-top: 8px;
3038
}
3039

    
3040
.vm-details .vm-detail {
3041
    display: block;
3042
}
3043

    
3044
.vm-details span.value {
3045
    color: #444;
3046
}
3047

    
3048
.single-container .lower .stat-busy {
3049
    margin-top: 10px;
3050
    margin-left: 325px;
3051
}
3052

    
3053
.vm-metadata {
3054
    padding-left: 10px;
3055
    width: 100px;
3056
    border: none;
3057
}
3058

    
3059
.metadata-left {
3060
}
3061

    
3062
.metadata-right {
3063
    width: 73px;
3064
    float:left;
3065
    height: 35px;
3066
    padding-left: 5px;
3067
    position:relative;
3068
    overflow:hidden;
3069
}
3070

    
3071
.metadata-right .items {
3072
    position:absolute;
3073
    height:20000em;
3074
}
3075

    
3076
.metadata-keys-container {
3077
    height: 60px;
3078
    float: left;
3079
}
3080

    
3081
.single .metadata-keys-container {
3082
    float: none;
3083
    height: auto;
3084
    margin-bottom: 5px;
3085
}
3086

    
3087
.single a.manage-metadata {
3088
    font-size: 80%;
3089
    margin-left:4px;
3090
    color: #383838;
3091
}
3092

    
3093
a.manage-metadata, a.stats-report {
3094
    font-size: 100%;
3095
    color: black;
3096
    margin-left:17px;
3097
    text-decoration: underline;
3098
}
3099

    
3100
a.stats-report {
3101
    margin: 15px 0  0 80px;
3102
}
3103

    
3104
div.machine a.manage-metadata:hover {
3105
    background-color: transparent;
3106
}
3107

    
3108
.single .metadata-actions, .single .metadata-keys-container .items {
3109
    padding-left: 5px;
3110
}
3111
.metadata-actions, .metadata-keys-container .items{
3112
    margin-top: 5px;
3113
}
3114

    
3115
.singe .metadata-actions, .single .metadata-keys-container .items{
3116
    font-size: 80%;
3117
    line-height: 12px;
3118
    width: 300px;
3119
}
3120

    
3121
.metadata-actions .prev,  .metadata-actions .next{
3122
    float:left;
3123
    width:29px;
3124
    height:6px;
3125
    cursor: pointer;
3126
}
3127

    
3128
.metadata-actions .prev {
3129
    background: url("./roll-up.png") no-repeat scroll 0 0 transparent;
3130
}
3131

    
3132
.metadata-actions .next {
3133
    background: url("./roll-down.png") no-repeat scroll 0 0 transparent;
3134
}
3135

    
3136
.scrollable {
3137
    position:relative;
3138
    overflow:hidden;
3139
    height: 35px;
3140
    width: 120px;
3141
    margin-bottom:2px;
3142
}
3143

    
3144
.scrollable .items {
3145
    position:absolute;
3146
    height:20000em;
3147
}
3148

    
3149
/* single view */
3150
.single {
3151
    color: #383838;
3152
}
3153

    
3154
.single .column1 {
3155
    float: left;
3156
    margin: 1px 0 25px 17px;
3157
    width: 140px;
3158
}
3159

    
3160
.single .column1 .state {
3161
    float: left;
3162
    margin-left: 4px;
3163
    padding-bottom: 6px;
3164
    padding-top: 3px;
3165
    position: relative;
3166
    right: 0;
3167
    text-align: center;
3168
    width: 126px;
3169
}
3170

    
3171
.single .column1 .state-label {
3172
    padding-top: 5px;
3173
}
3174

    
3175
.single .column1 .indicators {
3176
    margin-right: 38px !important;
3177
}
3178

    
3179
.single div.connect-arrow {
3180
    margin-left: -17px;
3181
}
3182

    
3183
.single div.connect-border {
3184
    margin-left: -29px;
3185
}
3186

    
3187
.single .single-actions {
3188
    width: 150px;
3189
    height: 60px;
3190
    margin-bottom: 45px;
3191
    margin-left: -10px;
3192
}
3193

    
3194
.single .vm-actions .action-container {
3195
    margin-bottom: 1px;
3196
}
3197

    
3198
.single .vm-actions .action-container .confirm_single {
3199
    right: -45px;
3200
}
3201

    
3202
.single .vm-actions .action-container.destroy .confirm_single {
3203
}
3204

    
3205
.single .vm-actions .action-container.destroy {
3206
    bottom: -20px;
3207
}
3208

    
3209
.single a.single-action {
3210
    text-decoration: none;
3211
    cursor: pointer;
3212
    display: block;
3213
}
3214

    
3215
.single a.single-action:hover {
3216
    background-color:#A1C8DB;
3217
    width: 162px;
3218
    opacity: 0.8;
3219
    filter: alpha(opacity = 80);
3220
}
3221

    
3222
.single a.single-action.selected {
3223
    color: #FF7F2A !important;
3224
    width: 50px !important;
3225
}
3226

    
3227
.single a.single-action.selected:hover {
3228
    background-color:transparent;
3229
}
3230

    
3231
.single .spinner, .single .action-indicator {
3232
    margin: 15px 45px 0 0px !important
3233
}
3234

    
3235
.single .action-indicator {
3236
    margin-right: 55px !important;
3237
}
3238

    
3239
.single .wave {
3240
    margin: 15px 53px 0 0px !important
3241
}
3242

    
3243
.single div.action_error {
3244
    margin: 2px 0px 0 605px !important;
3245
    position: relative;
3246
}
3247

    
3248
.single .column2 {
3249
    background-color: #A1C8DB;
3250
    float: left;
3251
    font-size: 78%;
3252
    line-height: 17px;
3253
    margin: 0 0 10px 5px;
3254
    width: 358px;
3255
}
3256

    
3257
.single .column2 .machine-labels {
3258
    float: left;
3259
    font-size: 90%;
3260
    margin-left: 10px;
3261
    margin-top: 10px;
3262
    width: 125px;
3263
}
3264

    
3265
.single .machine-detail.title {
3266
    background-color: #74AEC9;
3267
    color: #fff;
3268
    padding: 4px 6px;
3269
    font-size: 0.8em;
3270
    width: 346px;
3271
    margin-left: 5px;
3272
    float: left;
3273
}
3274

    
3275
.single .column2 .machine-details {
3276
    float: right;
3277
    text-align: right;
3278
    font-size: 90%;
3279
    width: 210px;
3280
    margin-right: 10px;
3281
    margin-top: 10px;
3282
}
3283

    
3284
.single .column2 .name, .single .column2 .disk, .single .column2 .image-size, .single .column2 .ipv6 {
3285
    margin-bottom: 13px;
3286
}
3287

    
3288
.single .tags {
3289
    clear: both;
3290
    margin-bottom: 10px;
3291
    margin-left: 10px;
3292
}
3293

    
3294
.single .tags-label {
3295
    float: left;
3296
    padding: 0 5px;
3297
    width: 30px;
3298
}
3299

    
3300
.single .tags-down-arrow {
3301
    background: url("/static/tags-down-arrow.png") no-repeat scroll 1px 7px transparent;
3302
    float: left;
3303
    height: 16px;
3304
    width: 9px;
3305
}
3306

    
3307
.single .tags-header .info-header{
3308
    padding-top:0;
3309
    padding-bottom:0;
3310
}
3311

    
3312
.single .tags-header {
3313
    font-size: 0.62em;
3314
    cursor: pointer;
3315
    float: left;
3316
    margin-bottom:5px;
3317
}
3318

    
3319
.single .tags-header span.label {
3320
    font-size: 104%;
3321
}
3322

    
3323
.single .tags-content {
3324
    background-color: #84B7D0;
3325
    clear: both;
3326
    height: auto;
3327
    padding-bottom: 5px;
3328
    padding-top: 5px;
3329
    width: 300px;
3330
}
3331

    
3332
.single .column3 {
3333
    background-color: #A1C8DB;
3334
    width: 150px;
3335
    overflow: visible;
3336
    padding-bottom: 10px;
3337
    position: absolute;
3338
    right: 20px;
3339
    top: 130px;
3340
}
3341

    
3342
.single .col3 {
3343
    float: right;
3344
    width: 150px;
3345
    margin-right: 15px;
3346
    margin-bottom: 15px;
3347
}
3348

    
3349
.single .column3 .controls {
3350
    font-size: 80%;
3351
    height: 20px;
3352
    padding-left: 7px;
3353
    padding-right: 7px;
3354
    padding-top: 8px;
3355
    padding-bottom: 5px;
3356
    border-bottom: 1px solid #84B7D0;
3357
}
3358

    
3359
.single .column3 .vm-control:hover {
3360
    background-color: #5CA1C0;
3361
}
3362

    
3363
.single .column3 .previous {
3364
    float:left;
3365
    width: 72px;
3366
}
3367

    
3368
.single .column3 .next {
3369
    float: right;
3370
    text-align: center;
3371
    width: 60px;
3372
}
3373

    
3374
.single .column3 .next-label {
3375
    float: right;
3376
    margin-right: 3px;
3377
    margin-top: -2px;
3378
}
3379

    
3380
.single .column3 .next-arrow {
3381
    float: right;
3382
    height: 18px;
3383
    width: 10px;
3384
    background: url("./right-arrow.png") no-repeat scroll 3px 2px transparent;
3385
}
3386

    
3387
.single .column3 .prev-label {
3388
    float: left;
3389
    margin-left: 3px;
3390
    margin-top: -2px;
3391
}
3392

    
3393
.single .column3 .prev-arrow {
3394
    background: url("./left-arrow.png") no-repeat scroll 3px 2px transparent;
3395
    float: left;
3396
    height: 18px;
3397
    width: 10px;
3398
}
3399

    
3400
.single .column3 .separator {
3401
    width: 135px;
3402
    height: 1px;
3403
    background-color: #84B7D0;
3404
    margin: 0 0 0 7px;
3405
    clear: both;
3406
}
3407

    
3408
.single .column3 .servers {
3409
    font-size: 80%;
3410
    line-height: 15px;
3411
    padding-top: 10px;
3412
    text-align: right;
3413
    overflow: visible;
3414
    position: relative;
3415
}
3416

    
3417
.single .column3 .server-name {
3418
    margin-left: 10px;
3419
    padding-right: 5px;
3420
    cursor: pointer;
3421
    padding-bottom: 2px;
3422
}
3423
div.single div.column3 div.server-name:hover {
3424
    background-color: #5CA1C0;
3425
}
3426
.single .column3 .column3-selected {
3427
    background-color: #84B7D0;
3428
    color: white;
3429
    opacity: 0.8;
3430
    padding-left: 9px;
3431
    width: 160px;
3432
    filter: alpha(opacity = 80);
3433
    position: relative;
3434
    width: 126px;
3435
}
3436

    
3437
.single .toggler {
3438
    color: #FFFFFF;
3439
    float: right;
3440
    font-size: 140%;
3441
}
3442

    
3443
.single .cpu-usage, .single .network-usage {
3444
    text-align: center;
3445
    padding-top: 15px;
3446
    margin-bottom: 5px;
3447
    font-size: 90%;
3448
    font-weight: bold;
3449
}
3450

    
3451
.single .cpu-graph, .single .network-graph {
3452
    margin-left: 20px;
3453
    margin-bottom:30px;
3454
    width: 660px;
3455
}
3456

    
3457
.single div.lower img.stats {
3458
    margin-left: 82px;
3459
}
3460

    
3461
.single div.lower img.stats {
3462
    display: none;
3463
}
3464

    
3465
.single .single-image {
3466
    width: 126px;
3467
    height: 136px;
3468
    margin-bottom: 10px;
3469
    margin-left: 4px;
3470
    background-image: url("./icons/machines/large/unknown-sprite.png");
3471
    background-repeat: no-repeat;
3472
    cursor: pointer;
3473
}
3474

    
3475
.single .single-image-state1 {
3476
    background-position: 0px 0;
3477
}
3478

    
3479
.single .single-image-state3 {
3480
    background-position: -252px 0;
3481
}
3482

    
3483
.single .single-image-state4 {
3484
    background-position: -378px 0;
3485
}
3486

    
3487
.single .single-image-state2 {
3488
    background-position: -126px 0;
3489
}
3490

    
3491
.single .column3 .previous, .single .column3 .next {
3492
    cursor: pointer;
3493
    background-color: #84B7D0;
3494
    color: white;
3495
    font-size: 100%;
3496
    height: 15px;
3497
    padding-top: 2px;
3498
}
3499

    
3500
.single .column3 .disabled {
3501
    opacity: 0.5;
3502
    filter: alpha(opacity = 50);
3503
}
3504

    
3505
.single div.lower {
3506
    clear:both;
3507
    background: #EFF7FA repeat scroll 0 0;
3508
    width: 700px;
3509
    padding-bottom: 15px;
3510
}
3511

    
3512
.single div.upper {
3513
    background: transparent;
3514
    margin-bottom: 10px;
3515
    overflow: visible;
3516
    width: 700px;
3517
    background: #EFF7FA repeat scroll 0 0;
3518
}
3519

    
3520
/* console css */
3521
.console-header-logo {
3522
    padding-top: 17px;
3523
    margin-left: 30px;
3524
    position: fixed;
3525
}
3526

    
3527
#console-header div.help-text {
3528
    font-size: 75%;
3529
    font-weight:bold;
3530
    color:#FFFFFF;
3531
    float:left;
3532
    position: absolute;
3533
    margin: 45px 0 0 2px;
3534
}
3535

    
3536
div.console-container {
3537
    margin: 0 0em;
3538
    height: auto;
3539
}
3540

    
3541
#wrapper.console {
3542
    width: auto;
3543
}
3544

    
3545
.console-info {
3546
    font-size:80%;
3547
    color: white;
3548
    float:left;
3549
    position:relative;
3550
    margin: 15px 0 0 480px;
3551
}
3552

    
3553
applet {
3554
    width:100%;
3555
    height:100%;
3556
}
3557

    
3558
div.console-footer {
3559
    /* this is for version 0.5*/
3560
    display: none;
3561
}
3562

    
3563
.console-footer #footer-text{
3564
    float:left;
3565
    left: auto;
3566
    margin-left:30px;
3567
}
3568

    
3569
/* add network wizard (see also #wizard for shared classes) */
3570
#networks-wizard .header {
3571
    background-color: #4085A5;
3572
    height: 56px;
3573
}
3574

    
3575
#networks-wizard div.name-input {
3576
    margin: 75px 0 0 55px;
3577
}
3578

    
3579
#networks-wizard input {
3580
    border: 1px solid #CCCCCC;
3581
    color: #445566;
3582
    letter-spacing: 1px;
3583
    width: 170px;
3584
}
3585

    
3586
#networks-wizard span.help {
3587
    font-style: italic;
3588
    font-size: 80%;
3589
    margin-left: 10px;
3590
}
3591

    
3592
#networks-wizard .separator-end {
3593
    background-color: #387693;
3594
    height: 6px;
3595
    width: 479px;
3596
    margin-left: -13px;
3597
    margin-top: 19px;
3598
}
3599

    
3600
.red {
3601
    color: red;
3602
}
3603

    
3604
/* add server to network wizard (see also #metadata-wizard for shared classes) */
3605
#add-machines-wizard span.machine-name {
3606
    margin-left: 4px;
3607
    vertical-align: text-top;
3608
}
3609

    
3610
#add-machines-wizard img.list-logo {
3611
    margin: 2px 1px 1px;
3612
}
3613

    
3614
.css-panes {
3615
    clear: both;
3616
}
3617

    
3618
.last .firewall-content {
3619
    margin-bottom:13px;
3620
}
3621

    
3622
#pub .last .network-separator {
3623
    display:none;
3624
}
3625

    
3626
.public-networks .empty-network-slot {
3627
    display: none;
3628
}
3629

    
3630
.clearfix {
3631
    display: block;
3632
    width: auto;
3633
    zoom: 1;
3634
}
3635

    
3636
/* float clearing for all browsers except the devil one */
3637
.clearfix:after{
3638
  clear: both;
3639
  content: ".";
3640
  display: block;
3641
  height: 0;
3642
  visibility: hidden;
3643
  font-size: 0;
3644
}
3645

    
3646
* html .clearfix {
3647
    display: inline-block;
3648
}
3649

    
3650
#machinesview .status, .single .state {
3651
    font-size: 75%;
3652
}
3653

    
3654
#machinesview-list div.action-indicator {
3655
    margin:0 !important;
3656
    float: none !important;
3657
}
3658

    
3659
div.action-indicator {
3660
    width: 15px;
3661
    height: 20px;
3662
    background-repeat: no-repeat;
3663
    background-position: 0 0;
3664
}
3665

    
3666
tbody.machines div.action-indicator {
3667
    position: relative;
3668
    top: -2px;
3669
}
3670
div.state .destroy, tbody.machines .destroy {
3671
    background-image: url("./icons/actions/medium/destroy.png");
3672
}
3673
div.state .console, tbody.machines .console {
3674
    background-image: url("./icons/actions/medium/console.png");
3675
}
3676
div.state .start, tbody.machines .start {
3677
    background-image: url("./icons/actions/medium/start.png");
3678
}
3679
div.state .reboot, tbody.machines .reboot {
3680
    background-image: url("./icons/actions/medium/reboot.png");
3681
}
3682
div.state .shutdown, tbody.machines .shutdown {
3683
    background-image: url("./icons/actions/medium/shutdown.png");
3684
}
3685

    
3686

    
3687
.no-invitations-left {
3688
    margin-bottom: 20px;
3689
    color: #E44848;
3690
}
3691

    
3692
.invitations #field_name_name, .invitations #field_email_name {
3693
    float: left;
3694
    display: block;
3695
    width: 180px;
3696
}
3697
.invitations input {
3698
    width: 170px;
3699
}
3700

    
3701
.invitations #fieldheaders span.description {
3702
    font-size: 0.8em;
3703
    color: #666;
3704
    margin-left: 2px;
3705
}
3706

    
3707
.invitations #fields {
3708
    margin-top: 5px;
3709
}
3710

    
3711
.invitations .add-field-container {
3712
    margin-top: 5px;
3713
}
3714

    
3715
.invitations #errors {
3716
    padding: 5px;
3717
    background-color: #800000;
3718
}
3719

    
3720
.invitations #errors p {
3721
    margin-bottom: 10px;
3722
    font-size: 0.95em;
3723
    padding-top:0;
3724
    margin-top:0;
3725
    color: #fff;
3726
}
3727

    
3728
.invitations #errors li {
3729
    font-size: 0.85em;
3730
    color: #ddd;
3731
}
3732

    
3733
.invitations #errors {
3734
    font-size: 100%;
3735
    margin-bottom: 10px;
3736
}
3737

    
3738
#invsent {
3739
    padding-top: 10px;
3740
}
3741

    
3742
#invsent h3.overlay-inner-title {
3743
    font-size: 1.2em;
3744
    font-weight: normal;
3745
    border-bottom: 1px solid #B0D0E0;
3746
}
3747

    
3748
#invsent .icons-info img {
3749
    vertical-align: middle;
3750
}
3751

    
3752
#invsent .icons-info {
3753
    margin-top: 10px;
3754
    font-size: 0.7em;
3755
}
3756

    
3757
#invsent .icons-info span {
3758
    margin-right: 10px;
3759
}
3760

    
3761
.notification-box .invitations {
3762
    padding-bottom: 0;
3763
}
3764
.notification-box .invitations .sub-text {
3765
    display: none;
3766
}
3767

    
3768
h3.overlay-inner-title {
3769
    color: #4085A5;
3770
    font-size: 2em;
3771
}
3772

    
3773
#invsent .message {
3774
    font-size: 0.9em;
3775
    padding: 5px 0;
3776
    margin-top: 5px;
3777
    margin-bottom: -10px;
3778
    color: #5CAD54;
3779
}
3780

    
3781
#invsent .errormsg {
3782
    color: #AE2B34;
3783
}
3784

    
3785
#add-name-container {
3786
    margin-bottom: 10px;   
3787
}
3788

    
3789
.remove-field-trigger, .add-field-trigger {
3790
    cursor: pointer;
3791
}
3792

    
3793
.add-field-trigger img {
3794
    vertical-align: middle;
3795
}
3796

    
3797
.invitations form {
3798
    margin-bottom: 20px;
3799
}
3800

    
3801
#invsent h3 {
3802
    font-size: 0.8em;
3803
    font-weight: bold;
3804
}
3805

    
3806
#invsent h3 span {
3807
    font-weight: normal;
3808
    font-size: 0.9em;
3809
    margin-right: 5px;
3810
    display: block;
3811
    margin-top: -2px;
3812
}
3813

    
3814
#invsent ul {
3815
    margin-top: 3px;
3816
}
3817

    
3818
#invsent li {
3819
    color: #4085A5;
3820
    font-size: 1.1em;
3821
    padding-top: 0.5em;
3822
    border-bottom: 1px solid #efefef;
3823
    padding-bottom: 0.5em;
3824
    font-size: 0.9em;
3825
    position: relative;
3826
}
3827

    
3828
#invsent li:hover {
3829
    background-color: #efefef;
3830
}
3831

    
3832
#invsent li img {
3833
    position: absolute;
3834
    left:20px;
3835
    bottom: 2px;
3836
}
3837

    
3838
#invsent h3 img {
3839
    float: none;
3840
    vertical-align: middle;
3841
    margin-left: 3px;
3842
}
3843

    
3844
#invsent .name {
3845
    float: left;
3846
    width: 55%;
3847
    padding-left: 20px;
3848
}
3849

    
3850
#invsent .email {
3851
    float: left;
3852
    width: 40%;
3853
}
3854

    
3855
#invsent li.accepted {
3856
    color: #ABD49C;
3857
}
3858

    
3859
#invsent li img {
3860
    margin-left: -20px;
3861
    margin-top: 1px;
3862
}
3863

    
3864
#invsent li img.resend {
3865
    cursor: pointer;
3866
}
3867

    
3868
.invitations #field_email_name {
3869
}
3870

    
3871
#invform #fields input {
3872
    margin-right: 10px;
3873
}
3874

    
3875
.machine-now-building {
3876
    padding-right: 15px !important;
3877
    text-align: justify;
3878
}
3879

    
3880
.sub-text {
3881
    padding-top: 15px;
3882
    padding-right: 15px;
3883
    text-align: justify;
3884
    font-style: italic;
3885
    font-size: 0.8em !important;
3886
}
3887

    
3888
#notification-box a {
3889
    color: #4085A5;
3890
}
3891

    
3892
#notification-box .machine-title img {
3893
    vertical-align: middle;
3894
}
3895

    
3896
#notifiaction-box .password-header {
3897
    margin-bottom: 0 !important;
3898
}
3899

    
3900
#notification-box .password-container a {
3901
    color: #fff;
3902
    text-decoration: underline;
3903
}
3904

    
3905
#notification-box .password-container a:hover {
3906
    background-color: #fff;
3907
    color: #4085A5;
3908
}
3909

    
3910
#notification-box .password-container {
3911
    background: #4085A5;
3912
    border: none;
3913
}
3914

    
3915
#notification-box .password-container .password a {
3916
    font-weight: normal !important;
3917
}
3918

    
3919
#notification-box .cmd {
3920
    color: #fff;
3921
    font-family: monospace;
3922
    font-size: 1.6em;
3923
}
3924

    
3925
.machine-container .separator {
3926
    background-color: #B0D1E0;
3927
}
3928

    
3929
#creation-password-overlay div.password-cont {
3930
    margin: 10px auto;
3931
    padding: 10px;
3932
    border: 2px solid #75B54A;
3933
    background-color: #AADE87;
3934
    color: #447821;
3935
    text-align: left;
3936
    padding-left: 5em;
3937
    position: relative;
3938
}
3939

    
3940
#creation-password-overlay {
3941
    position: relative;
3942
}
3943

    
3944
#creation-password-overlay .form-action {
3945
    position: absolute;
3946
    bottom: 15px;
3947
    right: 13px;
3948
    font-size: 0.8em;
3949
}
3950

    
3951
#creation-password-overlay .password {
3952
    font-size: 1.3em;
3953
    font-weight: bold;
3954
    margin-right: 5em;
3955
    float: right;
3956
}
3957

    
3958
.feedback-form .description {
3959
    margin-bottom: 25px;
3960
}
3961

    
3962
.feedback-form label {
3963
    display: block;
3964
    font-weight: bold;
3965
    margin-bottom: 10px;
3966
    font-size: 0.8em;
3967
}
3968

    
3969
.feedback-form .form-actions {
3970
    border-top: none;
3971
}
3972

    
3973
.nospace {
3974
    padding-top: 0 !important;
3975
    padding-bottom: 0 !important;
3976
}
3977

    
3978
.noborder {
3979
    border-top: none !important;
3980
    border-bottom: none !important;
3981
}
3982

    
3983
.overlay .feedback-form .messages.description {
3984
    padding-bottom:0;
3985
    margin-bottom: 0;
3986
}
3987

    
3988
.feedback-form .messages .error-message {
3989
    color: #f00;
3990
}
3991

    
3992
.feedback-form .messages .success-message {
3993
    color: #8AA87F;
3994
}
3995

    
3996
.feedback-form .feedback-message {
3997
    width: 548px;
3998
    height: 200px;
3999
    border: 1px solid #ddd;
4000
    padding: 5px;
4001
}
4002

    
4003
#feedback-form .empty-error-msg {
4004
    display: none;
4005
}
4006

    
4007
#feedback-form .data-text {
4008
    display: none;
4009
}
4010

    
4011
#feedback-form .message {
4012
    display: none;
4013
}
4014

    
4015
#feedback-form label {
4016
    display: block;
4017
    font-size: 0.85em;
4018
    font-weight: bold;
4019
}
4020

    
4021
#feedback-form label.inline {
4022
    display: inline;
4023
    padding-left: 5px;
4024
}
4025

    
4026
#feedback-form p {
4027
    padding: 1em 0;
4028
    color: #444;
4029
    margin-bottom: 10px;
4030
}
4031

    
4032
#feedback-form .description {
4033
    font-style: italic;
4034
    font-size: 0.9em;
4035
    color: #888;
4036
}
4037

    
4038
#feedback-form .feedback-text {
4039
    width: 98%;
4040
    height: 100px;
4041
    margin-top: 10px;
4042
    margin-bottom: 10px;
4043
}
4044

    
4045
#feedback-form .submit-data {
4046
    display: none;
4047
}
4048

    
4049
#feedback-form .submit, #invform .submit {
4050
    background-color: #4085A5;
4051
    color: #fff;
4052
    border: none;
4053
    padding: 5px 16px;
4054
    cursor: pointer;
4055
    font-size: 1em;
4056
    position: relative;
4057
}
4058

    
4059
#feedback .submit {
4060
    float: right;
4061
    right: 10px;
4062
    margin-top: 10px;
4063
}
4064

    
4065

    
4066
#feedback-form .submit:hover, #invform .submit:hover {
4067
    background-color: #549FC3;
4068
}
4069

    
4070
.feedback-intro {
4071
    padding-right: 15px !important;
4072
    text-align: justify;
4073
}
4074

    
4075
.popup-body .message {
4076
    padding: 20px 5px;
4077
    display: none;
4078
}
4079

    
4080
.popup-body .loading {
4081
    color: #fff;
4082
}
4083

    
4084
.popup-body .success {
4085
    color: #1F921A;
4086
}
4087

    
4088
.popup-body .errormsg {
4089
    color: #E32424;
4090
}
4091

    
4092

    
4093
.close-msg-box {
4094
    display: block;
4095
    margin-top: 10px;
4096
    cursor: pointer;
4097
    color: #4085A5;
4098
    text-decoration: underline;
4099
}
4100

    
4101

    
4102
.console .ip-version-label {
4103
    margin: 0 5px;
4104
}
4105

    
4106
.ipv6-text, .ipv4-text {
4107
    font-size: 0.9em;
4108
}
4109

    
4110
.tooltip {
4111
    background-color: #C4DDE9;
4112
    color: #000;
4113
    font-size: 0.7em;
4114
    padding: 0.2em 0.5em;
4115
    border: 1px solid #888;
4116
    z-index: 50000;
4117
}
4118

    
4119
/*404 and 500 pages*/
4120

    
4121
.error_page {
4122
    position: relative;
4123
    top: 40px;
4124
    padding-bottom: 140px !important;
4125
}
4126

    
4127
.error_page h1 {
4128
    font-weight: normal;
4129
}
4130

    
4131
.error_page .msg_header {
4132
    margin: 0px;
4133
    font-size: 10em;
4134
    position: absolute;
4135
    left: -5px;
4136
    top: 0px;
4137
    color: #4085A5;
4138
    font-family: arial, verdana;
4139
}
4140

    
4141
.error_page p.error_desc {
4142
    color: #fff;
4143
    font-size: 0.8em;
4144
}
4145

    
4146
.error_page {
4147
    padding-right: 50px !important;
4148
    padding-left: 100px !important;
4149
}
4150

    
4151
.error_page .error_content {
4152
    padding-left: 150px;
4153
    padding-top: 97px;
4154
}
4155

    
4156
.error_page .error_content .links, .info_content .links {
4157
    margin-top: 10px;
4158
    margin-left: 20px;
4159
}
4160

    
4161
.error_page .http_error .code {
4162
    letter-spacing: -10px;
4163
    font-size: 9em;
4164
}
4165

    
4166
.error_page .http_error .msg {
4167
    letter-spacing: -1px;
4168
    font-size: 2em;
4169
}
4170

    
4171
.error_page .http_error {
4172
    position: absolute;
4173
    right: 0px;
4174
    bottom: 0px;
4175
    color: #75B3D0;
4176
    line-height: 1em;
4177
}
4178

    
4179
.error_page .error_content a, .info_content .links a {
4180
    color: #4085A5;
4181
    font-weight: bold;
4182
    margin-right: 10px;
4183
    font-size: 0.9em;
4184
}
4185

    
4186
.error_body #container, .info_body #container {
4187
    background-position: right 200px;
4188
}
4189

    
4190
.info_page h1 {
4191
    color: #4085A5;
4192
    font-size: 2em;
4193
    font-weight: normal;
4194
}
4195

    
4196
.info_page p {
4197
    color: #ffffff;
4198
    margin: 1em 0;
4199
}
4200

    
4201
.info_body p a, .error_body p a{
4202
    color: #4085A5;
4203
    text-decoration: underline;
4204
}
4205

    
4206
.error_404 .http_error .code {
4207
    letter-spacing: -7px;
4208
}
4209

    
4210
.network-progress-indicator {
4211
    position: relative;
4212
    display: none;
4213
}
4214

    
4215
.network-progress-indicator img {
4216
    position: absolute;
4217
    bottom: 44px;
4218
    left: 340px;
4219
}
4220

    
4221

    
4222
.single .progress-message {
4223
    margin-top: 90px;
4224
    font-size: 0.6em;
4225
    padding: 0 10px;
4226
    text-align: center;
4227
}
4228

    
4229
/*metadata keys/values*/
4230
.items .tag-item  {
4231
    display: block;
4232
}
4233

    
4234
.single .items .tag-item .key {
4235
    width: 60px;
4236
}
4237

    
4238
.running .scrollable, .terminated .scrollable {
4239
    height: 42px;
4240
}
4241

    
4242
.items .tag-item .key {
4243
    margin-right: 5px;
4244
    width: 30px;
4245
    display: block;
4246
    float: left;
4247
    color: #000;
4248
}
4249

    
4250
.items .tag-item .value {
4251
    color: #444;
4252
}
4253

    
4254
#machinesview-list {
4255
    display: none;
4256
}
4257

    
4258
#machinesview-single {
4259
    position: relative;
4260
    display: none;
4261
}
4262

    
4263
#machinesview-icon {
4264
    display: none;
4265
}
4266

    
4267
#machinesview-icon, #machinesview-single, #machinesview-list {
4268
    
4269
}
4270

    
4271
tbody.machines .spinner {
4272
    margin-top: 0!important;
4273
    margin: 0 !important;
4274
    float: none !important;
4275
}
4276

    
4277
.slider .slider-point {
4278
    width: 4px;
4279
    height: 3px;
4280
    margin-left: 1px;
4281
    background-color: transparent;
4282
    display: block;
4283
    position: absolute;
4284
    z-index: 10;
4285
    bottom: 0px;
4286
}
4287

    
4288
.slider .slider-point-light {
4289
    background-color: transparent;
4290
}
4291

    
4292
.slider-point-text {
4293
    font-size: 0.6em;
4294
    position: absolute;
4295
    top: 4px;
4296
    border-top: 5px solid #C5DEE9;
4297
    padding: 3px;
4298
    color: #4085A5;
4299
    display: block;
4300
    min-width: 6px;
4301
    text-align: middle;
4302
}
4303

    
4304
.slider .handle {
4305
    z-index: 50;
4306
}
4307

    
4308
.modal p.desc {
4309
    margin: 5px 0;
4310
    margin-left: 37px;
4311
    font-size: 0.8em;
4312
    color: #888;
4313
}
4314

    
4315
.api_overlay_template {
4316
    display: none;
4317
}
4318

    
4319
.api_content .password-container .password {
4320
    color: #fff;
4321
    font-size: 1.1em;
4322
}
4323

    
4324
#disks-pane {
4325
    margin-top: 58px;
4326
}
4327

    
4328
span.resend-msg {
4329
    display: block;
4330
    margin-bottom: 5px;
4331
}
4332

    
4333
.success-msg {
4334
    background-color: #5CAD54;
4335
    color: #fff;
4336
    padding: 0.4em;
4337
    border: 1px solid #ddd;
4338
}
4339

    
4340
.error-msg {
4341
    background-color: #800000;
4342
    color: #fff;
4343
    padding: 0.4em;
4344
    border: 1px solid #ddd;
4345
}
4346

    
4347
.success-msg em, .error-msg em {
4348
    font-weight: bold;
4349
    font-style: normal;
4350
    font-size: 0.9em;
4351
}
4352

    
4353
.pagination {
4354
            font-size: 80%;
4355
        }
4356
        
4357
.pagination a {
4358
    text-decoration: none;
4359
        border: solid 1px #AAE;
4360
        color: #15B;
4361
}
4362

    
4363
.pagination a, .pagination span {
4364
    display: block;
4365
    float: left;
4366
    padding: 0.3em 0.5em;
4367
    margin-right: 5px;
4368
        margin-bottom: 5px;
4369
        min-width:1em;
4370
        text-align:center;
4371
}
4372

    
4373
.pagination .current {
4374
    background: #4085A5;
4375
    color: #fff;
4376
        border: solid 1px #AAE;
4377
}
4378

    
4379
.pagination .current.prev, .pagination .current.next{
4380
        color:#999;
4381
        border-color:#999;
4382
        background:#fff;
4383
}
4384

    
4385
#invsent .pagination {
4386
    margin-top: 10px;
4387
}
4388

    
4389
table.list-machines .wave {
4390
    float: none !important;
4391
    margin: 0 !important;
4392
}
4393

    
4394
.overlay {
4395
    display: none;
4396
}
4397

    
4398
.overlay {
4399
    background-color: #fff;
4400
    border: 2px solid #444;
4401
    text-align: left;
4402

    
4403
    -moz-box-shadow: 0 0 90px 5px #000;
4404
    -webkit-box-shadow: 0 0 90px 5px #000;
4405
    box-shadow: 0 0 90px 5px #000;
4406
    width: 600px;
4407
}
4408

    
4409
.overlay a {
4410
    color: #387693;
4411
}
4412

    
4413
.overlay .overlay-content .description.subinfo {
4414
    margin-bottom:0;
4415
    border-bottom: none;
4416
    padding-bottom:0;
4417
    margin-top: 10px;
4418
    padding-top:10px;
4419
    border-top: 1px solid #64a6c4;
4420
    /*border-top: 1px solid #DBE6EB;*/
4421
    font-size: 0.8em;
4422
}
4423

    
4424
.overlay .overlay-content .important {
4425
    color: #800000;
4426
}
4427

    
4428
.overlay .overlay-content .description {
4429
    color: #444;
4430
    border-bottom: 1px solid #64a6c4;
4431
    margin-bottom: 10px;
4432
    padding-bottom: 10px;
4433
    font-size: 0.9em;
4434
    line-height: 1.6em;
4435
}
4436
.overlay .overlay-content .empty-message {
4437
    margin-bottom: 5px;
4438
}
4439

    
4440
.overlay h3.header {
4441
    font-size: 0.9em;
4442
    text-align: left;
4443
    padding: 0.8em;
4444
    padding-left: 1em;
4445
    font-weight: normal;
4446
    border-bottom: 1px solid #ddd;
4447
}
4448

    
4449
.overlay h3.header .title {
4450
    float: left;
4451
}
4452

    
4453
.overlay .container {
4454
    position: relative;
4455
    padding-top: 1em;
4456
    padding: 0.5em;
4457
    background-image: url("./popup-bg.png");
4458
    background-repeat: repeat-x;
4459
}
4460

    
4461
.overlay .content {
4462
    background-color: transparent;
4463
    background-image: url("./popup-inner-bg.png");
4464
    padding: 1em;
4465
    font-size: 0.8em;
4466
    background-repeat: repeat-x;
4467
    -moz-box-shadow: 0 0 1px 1px #888;
4468
    -webkit-box-shadow: 0 0 1px 1px #888;
4469
    box-shadow: 0 0 1px 1px #888;
4470
}
4471

    
4472
.overlay .message {
4473
}
4474

    
4475
.overlay .actions {
4476
    position: absolute;
4477
    right: 0.75em;
4478
    top: 0.6em;
4479
}
4480

    
4481
.overlay .actions span {
4482
    font-size: 0.8em;
4483
    color: #fff;
4484
    cursor: pointer;
4485
    margin-left: 10px;
4486
    display: block;
4487
    float: left;
4488
    background-color: #4085A5;
4489
    padding: 0.2em 0.4em;
4490
}
4491

    
4492
.overlay-error .error-more-details {
4493
    margin-top: 5px;
4494
    max-height: 210px;
4495
    overflow: auto;
4496
}
4497

    
4498
.overlay-error .key.details.expand {
4499
    background-image: url("./plus-8.png");
4500
}
4501

    
4502
.overlay-error .key.details {
4503
    background-color: #5189A3;
4504
    cursor: pointer;
4505
    background-image: url("./minus-8.png");
4506
    background-repeat: no-repeat;
4507
    background-position: 545px;
4508
}
4509

    
4510
.overlay-error .container {
4511
    padding-top: 1.9em;
4512
}
4513

    
4514
.overlay-error .error-details {
4515
    font-size: 0.8em;
4516
    margin-top: 10px;
4517
}
4518

    
4519
.overlay-error .error-details anonymous {
4520
    display: block;
4521
    margin-top: 10px;
4522
}
4523

    
4524
.overlay-error h3.header {
4525
    background-color: #800000;
4526
    color: #fff;
4527
}
4528

    
4529
.overlay-error.non-critical h3.header {
4530
    background-color: #987249;
4531
}
4532

    
4533
.overlay-error span.key {
4534
    font-weight: normal;
4535
    display: block;
4536
    margin-top: 0.5em;
4537
    background-color: #74AEC9;
4538
    color: #fff;
4539
    padding: 0.4em;
4540
    font-size: 0.8em;
4541
    font-weight: bold;
4542
}
4543

    
4544
.overlay-error span.value, .overlay-error div.value {
4545
    padding: 0.4em;
4546
    display: block;
4547
    margin-bottom: 0.3em;
4548
}
4549

    
4550
.overlay h3 .closeme {
4551
    float: right;
4552
    font-size: 0.7em;
4553
    margin-top: 0.2em;
4554
    cursor: pointer;
4555
}
4556

    
4557
.overlay .header .subtitle {
4558
    display: block;
4559
    font-size: 0.8em;
4560
    color: #ddd;
4561
}
4562

    
4563
.overlay .header .subtitle img {
4564
    vertical-align: middle;
4565
    margin-left: 10px;
4566
    margin-bottom: 2px;
4567
}
4568

    
4569
.overlay-info .content {
4570
    background-repeat: no-repeat;
4571
    background-position: 110% 110%;
4572
    background-color: rgba(255,255,255,0.6)
4573
}
4574

    
4575
.overlay-info .header {
4576
    background-color: #4085A5;
4577
}
4578

    
4579
.overlay-info .header .title {
4580
    color: #fff;
4581
}
4582

    
4583
.overlay-info .header .closeme {
4584
    color: #fff;
4585
}
4586

    
4587
#loading-view {
4588
    width: 600px;
4589
    margin: 0 auto;
4590
    padding: 20px 0;
4591
    font-size: 0.8em;
4592
}
4593

    
4594
#loading-view .header span {
4595
    font-weight: bold;
4596
    color: #4085A5;
4597
}
4598

    
4599
#loading-view .info {
4600
    color: #ddd;
4601
}
4602

    
4603
.options-list {
4604
    margin-top: 0.5em;
4605
    font-size: 0.8em;
4606
}
4607

    
4608
.options-list.five li {
4609
    float: left;
4610
    display: block;
4611
    width: 20%;
4612
    margin-bottom: 5px;
4613
}
4614

    
4615
.options-list.five li:nth-child(5n) .options-object-cont {
4616
    margin-right: 0;
4617
}
4618

    
4619
.options-object-cont input {
4620
    border: 1px solid #aaa;
4621
    width: 92px;
4622
    padding: 0;
4623
    margin: 0;
4624
    margin-top:3px;
4625
    padding: 2px;
4626
}
4627

    
4628
.options-list.three li {
4629
    float: left;
4630
    display: block;
4631
    width: 33%;
4632
    margin-bottom: 5px;
4633
}
4634

    
4635
.options-list li .options-object-cont {
4636
    padding: 4px;
4637
    margin-right: 4px;
4638
    border: 1px solid #A6D1E6;
4639
    cursor: pointer;
4640
    min-height: 35px;
4641
    position: relative;
4642
}
4643

    
4644
.options-list.three li:nth-child(3n) .options-object-cont {
4645
    margin-right: 0;
4646
}
4647

    
4648
.options-list li.selected .options-object-cont {
4649
    background-color: #4085A5;
4650
    border: 1px solid #fff;
4651
}
4652

    
4653
.options-list li.selected .options-object-cont .title {
4654
    color: #fff;
4655
}
4656

    
4657
.options-list li.options-object .title {
4658
    display: block;
4659
    color: #FF7F2A;
4660
    margin-bottom: 2px;
4661
}
4662

    
4663
.options-list li .option-action {
4664
    display: none;
4665
    position: absolute;
4666
    background-repeat: no-repeat;
4667
}
4668

    
4669
.options-list.five li.editing {
4670
    width: 40%;
4671
}
4672

    
4673
.options-list.five li.editing .value {
4674
    display: none;
4675
}
4676

    
4677
.options-list li .remove {
4678
    background-image: url("./option-action-remove.png");
4679
    width:10px;
4680
    height:10px;
4681
    right:5px;
4682
    bottom: 5px;
4683
}
4684

    
4685
.options-list li .edit {
4686
    background-image: url("./option-action-edit.png");
4687
    width:10px;
4688
    height:10px;
4689
    right:5px;
4690
    top: 5px;
4691
}
4692

    
4693
.options-list li:hover .option-action  {
4694
    display: block;
4695
}
4696

    
4697
.options-list li.options-object .value {
4698
    color: #4085A5;
4699
    margin-top: 5px;
4700
    display: block;
4701
}
4702

    
4703
.options-list li.selected.options-object .value {
4704
    color: #ddd;
4705
}
4706
.options-list li .options-object-cont:hover {
4707
    background-color: #fff;
4708
}
4709

    
4710
.options-list li.selected .options-object-cont:hover {
4711
    background-color: #A6D1E6;
4712
}
4713

    
4714
.options-list li img {
4715
    float: left;
4716
    margin:2px;
4717
    margin-right: 10px;
4718
    padding-bottom:10px;
4719
}
4720

    
4721
#metadata-overlay-content {
4722
    position: relative;
4723
}
4724

    
4725
.vm-meta .editor .predefined .predefined-meta-key:hover {
4726
    background-color: #4e8eac;
4727
    color: #fff;
4728
}
4729

    
4730
.vm-meta .editor .predefined .predefined-meta-key {
4731
    float: left;
4732
    margin-right: 5px;
4733
    padding: 4px;
4734
    display: block;
4735
    cursor: pointer;
4736
}
4737

    
4738
.vm-meta .editor .predefined {
4739
    background-color: #A6D1E6;
4740
    font-size: 0.9em;
4741
    border-top: 1px solid #ddd;
4742
}
4743

    
4744
.vm-meta .editor input {
4745
}
4746
.vm-meta .editor {
4747
    margin-bottom: 10px;
4748
}
4749

    
4750
.vm-meta .editor .form-actions .form-action {
4751
    min-width: 50px;
4752
}
4753

    
4754
.vm-meta .editor .form-field input.meta-key {
4755
    width: 90px;
4756
}
4757

    
4758
.vm-meta .form-field {
4759
    float: left;
4760
}
4761

    
4762
.vm-meta .form-actions .form-action {
4763
    float: left;
4764
    margin-right: 10px;
4765
    height: 11px;
4766
}
4767

    
4768
.vm-meta .editor .form-actions .cancel {
4769
    margin-right: 0;
4770
}
4771

    
4772
.vm-meta .editor .form-actions {
4773
    float: right;
4774
    margin:0;
4775
    padding:0;
4776
    margin-left: 15px;
4777
    margin-top: 0px;
4778
}
4779

    
4780
.vm-meta .editor {
4781
    background-color: rgba(64, 133, 165, 0.898) !important;
4782
    background-color: #649DB8;
4783
    font-size:0.9em;
4784
}
4785

    
4786
.vm-meta .meta-key-title {
4787
    font-size: 1.3em;
4788
    color: #fff;
4789
    margin-bottom: 10px;
4790
    display: none;
4791
    float: left;
4792
}
4793

    
4794
.vm-meta .editor-content {
4795
    padding: 10px;
4796
}
4797

    
4798
.vm-meta .inner-mask {
4799
    background-color: #fff;
4800
    opacity:0.6;
4801
    position: absolute;
4802
    top:0;
4803
    left:0;
4804
}
4805

    
4806
.vm-meta .editor label {
4807
    float: left;
4808
    color: #fff;
4809
    margin-right: 2px;
4810
    padding-top:4px;
4811
    font-size: 0.9em;
4812
}
4813

    
4814
.vm-meta .editor input {
4815
    border: none;
4816
    width: 170px;
4817
    margin-left: 10px;
4818
    font-size: 0.9em;
4819
    padding: 4px;
4820
}
4821

    
4822
.vm-meta li.create .options-object-cont {
4823
    background-color: #B3C9AD ;
4824
    border-color: #788774;
4825
}
4826
.vm-meta li.create .options-object-cont .value,
4827
.vm-meta li.create .options-object-cont .title {
4828
    color: #fff;
4829
}
4830

    
4831
#createvm-overlay-content {
4832
    padding: 0;
4833
}
4834

    
4835
.overlay-createvm .container {
4836
    width: 584px !important;
4837
}
4838

    
4839
.create-vm .header-step.current {
4840
    font-weight: bold;
4841
}
4842

    
4843
.create-vm .create-step-cont {
4844
    min-height: 240px;
4845
}
4846
.create-vm .create-controls {
4847
    padding: 10px;
4848
}
4849

    
4850
.create-vm ul li {
4851
    cursor: pointer;
4852
    padding: 4px;
4853
}
4854

    
4855
.create-vm ul li.selected {
4856
    background-color: #aaa;
4857
}
4858

    
4859
.cont-toggler {
4860
    background-image: url("./down-arrow.png");
4861
    background-position: right;
4862
    background-repeat: no-repeat;
4863
    background-color: #A1C8DB;
4864
    display: inline-block;
4865
    border-right: 6px solid #A1C8DB;
4866
    padding:2px;
4867
    padding-right: 14px;
4868
    padding-left:0;
4869
    cursor: pointer;
4870
    color: #fff;
4871
    font-size: 0.9em;
4872
}
4873

    
4874
.cont-toggler .label {
4875
    background-color: #98BDCF;
4876
    padding: 2px;
4877
    padding-left: 5px;
4878
    padding-right: 5px;
4879
}
4880

    
4881
.cont-toggler.open {
4882
    background-color: #98BDCF;
4883
    border-color: #98BDCF;
4884
    background-image: url("./up-arrow.png");
4885
}
4886

    
4887
.cont-toggler.open .label {
4888
    background-color: #4085A5;
4889
}
4890

    
4891
.overlay .form label {
4892
    font-color: #444;
4893
    margin-right: 10px;
4894
}
4895

    
4896
.form-field input {
4897
    border: 1px solid #aaa;
4898
    width: 200px;
4899
    padding: 3px;
4900
}
4901

    
4902
.form-actions {
4903
    margin-top: 5px;
4904
    padding-top:5px;
4905
    border-top: 1px solid #64a6c4;
4906
    font-size: 0.8em;
4907
}
4908

    
4909
.form-actions.plain {
4910
    margin-top: 0px;
4911
    padding-top:0px;
4912
    border-top: 0px;
4913
}
4914

    
4915
.form-action {
4916
    float: right;
4917
    min-width: 140px;
4918
    background-color: #FF7F2A;
4919
    border: 1px solid #FF7F2A;
4920
    text-align: center;
4921
    color: #FFFFFF;
4922
    cursor: pointer;
4923
    padding: 4px;
4924
}
4925

    
4926
.form-action:hover {
4927
    background-color: #FF9955;
4928
    color: #FFF;
4929
}
4930

    
4931
.form-action.prev,
4932
.form-action.cancel {
4933
    background-color: #800;
4934
    border: 1px solid #800;
4935
    float: left;
4936
}
4937

    
4938
.form-action.prev:hover,
4939
.form-action.cancel:hover {
4940
    background-color: #fff;
4941
    color: #800;
4942
}
4943

    
4944
.form-action.next,
4945
.form-action.ok {
4946
    background-color: #080;
4947
    border: 1px solid #080;
4948
}
4949

    
4950
.form-action.next:hover,
4951
.form-action.ok:hover {
4952
    background-color: #fff;
4953
    color: #080;
4954
}
4955

    
4956
.form-action .create,
4957
.form-action .submit {
4958

    
4959
}
4960

    
4961
.form-action.in-progress, button.in-progress {
4962
    background-image: url("./icons/indicators/medium/horizontal-progress.gif");
4963
    background-repeat: no-repeat;
4964
    background-position: center center;
4965
    color: transparent;
4966
}
4967

    
4968
#createvm-overlay-content {
4969
    padding: 0;
4970
}
4971

    
4972
.create-vm .image-details.selected .size {
4973
    color: #eee;
4974
}
4975

    
4976
.create-vm .image-details p {
4977
    font-size: 0.8em;
4978
    padding-left: 27px;
4979
    display:block;
4980
}
4981

    
4982
.create-vm .image-details .size {
4983
    margin-top: 2px;
4984
    font-size: 0.8em;
4985
    color: #aaa;
4986
    position: absolute;
4987
    right:5px;
4988
    top: 5px;
4989
}
4990

    
4991
.create-vm .step-cont {
4992
    margin: 15px;
4993
}
4994

    
4995
.create-vm .create-step-cont {
4996
    min-height: 250px;
4997
    float: left;
4998
    width: 584px;
4999
}
5000

    
5001
.create-vm .create-controls {
5002
    padding: 10px;
5003
    border-top: 1px solid #ddd;
5004
}
5005

    
5006
.create-vm .empty {
5007
    font-size: 0.8em;
5008
    color: #444;
5009
}
5010

    
5011
.create-vm h4 {
5012
    color: #5CA1C0;
5013
    margin-bottom: 0.5em;
5014
    font-family: arial;
5015
}
5016
.create-vm ul li {
5017
    cursor: pointer;
5018
    padding: 4px;
5019
    font-size: 0.9em;
5020
}
5021

    
5022
.create-vm ul li.selected {
5023
    background-color: #5CA1C0;
5024
    color: #fff;
5025
}
5026

    
5027
.create-vm .images-list-cont {
5028
    width: 40%;
5029
    float: left;
5030
    padding-left: 3%;
5031
    padding-right: 3%;
5032
}
5033

    
5034
.create-vm li.role .values .val:hover {
5035
    background-color: #eee;
5036
}
5037
.create-vm li.role .values .val.selected,  .create-vm li.role .values .val.selected:hover {
5038
    color: #fff;
5039
    background-color: #5CA1C0;
5040
}
5041

    
5042
.create-vm .images-filter-cont, .create-vm .flavors-predefined-cont {
5043
    width: 18%;
5044
    padding-right: 4%;
5045
    float:left;
5046
    border-right: 1px solid #A1C8DB;
5047
    overflow: auto;
5048
}
5049

    
5050
.create-vm .flavor-options-cont {
5051
    width: 74%;
5052
    float: left;
5053
    margin-left: 20px;
5054
}
5055

    
5056
.create-vm .flavor-options-cont .flavor-options li:hover {
5057
    background-image:-webkit-linear-gradient(top, #E8F4FA, #D1E7F0);
5058
    background-image:linear-gradient(top, #E8F4FA, #D1E7F0);
5059
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E8F4FA', endColorstr='#D1E7F0', GradientType=0);
5060
}
5061

    
5062
.create-vm .flavor-options-cont .flavor-options li.disabled * {
5063
    color: #eee !important;
5064
}
5065

    
5066
.create-vm .flavor-options-cont .flavor-options li.disabled {
5067
    background-image:linear-gradient(top, #aaa, #ddd);
5068
    background-image:-webkit-linear-gradient(top, #aaa, #ddd);
5069
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaaaaa', endColorstr='#dddddd', GradientType=0);
5070
}
5071

    
5072
.create-vm .flavor-options-cont .flavor-options li.selected {
5073
    background-color: #FF9955;
5074
    background-image:linear-gradient(top, #FF9955, #E88B4D);
5075
    background-image:-webkit-linear-gradient(top, #FF9955, #E88B4D);
5076
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9955', endColorstr='#E88B4D', GradientType=0);
5077
    border: 1px solid #C97943;
5078
}
5079

    
5080
.create-vm .predefined-list li.disabled {
5081
    color: #ddd !important;
5082
}
5083

    
5084
.create-vm .flavor-options-cont .flavor-options li {
5085
    display: block;
5086
    float: left;
5087
    margin-right: 10px;
5088
    padding: 10px 15px;
5089
    border: 1px solid #aaa;
5090
    background-image:-webkit-linear-gradient(top, #D1E7F0, #E8F4FA);
5091
    background-image:linear-gradient(top, #D1E7F0, #E8F4FA);
5092
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D1E7F0', endColorstr='#E8F4FA', GradientType=0);
5093
}
5094

    
5095
.create-vm .flavor-options-cont .flavor-options {
5096
    margin-bottom: 25px;
5097
}
5098

    
5099
.create-vm .flavor-options .metric {
5100
    font-size: 0.8em;
5101
    margin-left: 2px;
5102
}
5103

    
5104
.create-vm .flavor-options span.title {
5105
    color: #444;
5106
}
5107

    
5108
.create-vm .flavor-options span.desc {
5109
    display: block;
5110
    color: #aaa;
5111
    font-weight: normal;
5112
    font-size: 0.8em;
5113
    float: right;
5114
    margin-top: 4px;
5115
}
5116

    
5117
.create-vm .flavor-options .selected .value {
5118
    color: #FFF;
5119
}
5120

    
5121
.create-vm .flavor-options .value {
5122
    font-weight: bold;
5123
    color: #5CA1C0;
5124
}
5125

    
5126
.create-vm .flavor-options-cont h4 {
5127
    border-bottom: 1px solid #A1C8DB;
5128
    padding-bottom: 5px;
5129
}
5130

    
5131
.create-vm .images-info-cont {
5132
    width: 28%;
5133
    padding-left: 3%;
5134
    float: left;
5135
    border-left: 1px solid #A1C8DB;
5136
}
5137

    
5138
.create-vm .images-info-cont h4, .create-vm .vm-confirm .param h4{
5139
    color: #FF9955;
5140
    margin-bottom: 1em;
5141
    font-size: 1.2em;
5142
}
5143

    
5144
.create-vm .images-info-cont span.title {
5145
    color: #4085A5;
5146
    display: block;
5147
    margin-bottom: 2px;
5148
    font-size: 0.8em;
5149
}
5150

    
5151
.create-vm .type-filter li {
5152
    font-size: 0.8em;
5153
    font-weight: bold;
5154
    padding: 4px;
5155
    margin-bottom: 0px;
5156
    
5157
}
5158

    
5159
.create-vm .images-list .image-details:hover {
5160
    background-color: #eee;
5161
}
5162

    
5163
.create-vm .images-list .image-details.selected:hover {
5164
    background-color: #5CA1C0;
5165
}
5166

    
5167
.create-vm .images-list .image-details.selected {
5168
    /*font-weight: bold;*/
5169
}
5170

    
5171
.create-vm .images-list .image-details {
5172
    padding: 6px;
5173
    margin-bottom:1px;
5174
    position: relative;
5175
}
5176

    
5177
.create-vm .images-list .image-details img {
5178
    vertical-align: middle;
5179
    margin-right: 10px;
5180
}
5181

    
5182
.create-vm .images-info-cont .image-detail:last-child p {
5183
    border-bottom: none;
5184
}
5185

    
5186
.create-vm .images-info-cont h4 img {
5187
    vertical-align: middle;
5188
    margin-right: 7px;
5189
    margin-bottom: 5px;
5190
}
5191

    
5192
.create-vm .images-info-cont .description p {
5193
    font-size: 0.8em;
5194
}
5195

    
5196
.create-vm .images-info-cont p {
5197
    margin-bottom: 7px;
5198
    font-size: 0.9em;
5199
    border-bottom: 1px solid #A1C8DB;
5200
    padding-bottom: 7px;
5201
}
5202

    
5203
.create-vm .step-header {
5204
    padding: 10px;
5205
    padding-bottom:0;
5206
    margin-bottom: 10px;
5207
    background-color: #A1C8DB;
5208
    border-bottom: 1px solid #aaa;
5209
    position: relative;
5210
}
5211

    
5212
.create-vm .step-header .header-step .info span.subtitle {
5213
    font-size: 1.2em;
5214
    color: #fff;
5215
    font-weight: bold;
5216
}
5217

    
5218
.create-vm .step-header .header-step .info span {
5219
    float: none;
5220
    text-align: right;
5221
}
5222

    
5223
.create-vm .step-header .header-step .info {
5224
    position: absolute;
5225
    right: 15px;
5226
    top: 20px;
5227
    font-size: 0.8em;
5228
}
5229

    
5230
.create-vm .step-header .header-step span {
5231
    float: left;
5232
    display: block;
5233
}
5234

    
5235
.create-vm .steps-container {
5236
    width: 2000em;
5237
}
5238

    
5239
.create-vm .step-header .header-step .title {
5240
    margin-top: 20px;
5241
    font-size: 1em;
5242
    margin-left: 10px;
5243
}
5244

    
5245
#createvm-overlay-content {
5246
    width: 584px;
5247
    overflow: hidden;
5248
}
5249

    
5250
.create-vm .step-header .header-step .num {
5251
    font-size: 4em;
5252
    margin-bottom: -5px;
5253
    font-family: 'Ubuntu';
5254
    font-weight: normal !important;
5255
}
5256

    
5257
.create-vm .step-header .header-step {
5258
    color: #DCEBF1;
5259
    margin-bottom: -6px;
5260
    width: 25%;
5261
    padding-left: 0%;
5262
    display: block;
5263
    float: left;
5264
}
5265

    
5266
.create-vm .step-header .header-step.current {
5267
    color: #387693;
5268
}
5269

    
5270
.create-vm .image-filters-title {
5271
    margin-top: 1em;
5272
    margin-bottom: 0.5em;
5273
}
5274

    
5275
.create-vm .create-step-cont span.clear {
5276
    font-size: 0.8em;
5277
    font-weight: bold;
5278
    color: #A1C8DB;
5279
    display: block;
5280
}
5281

    
5282
.create-vm .category-filters li {
5283
    float:left;
5284
    display: block;
5285
    padding: 4px;
5286
    background-color: #eee;
5287
    margin-right: 5px;
5288
    font-size: 0.9em;
5289
    margin-bottom: 5px;
5290
}
5291

    
5292
.create-vm .content-cont {
5293
    height: 340px;
5294
    overflow: auto;
5295
}
5296

    
5297
.confirm-cont {
5298
    height: 250px;
5299
}
5300

    
5301
.create-vm .vm-confirm .rename input.rename-field {
5302
    font-size: 1.4em;
5303
    padding: 5px;
5304
    width: 93%;
5305
    padding-left: 30px;
5306
    background-position: 7px center;
5307
    background-repeat: no-repeat;
5308
}
5309

    
5310
.create-vm .vm-confirm .rename label {
5311
    display: block;
5312
}
5313

    
5314
.create-vm .vm-confirm .confirm-conts {
5315
    margin-top: 20px;
5316
}
5317

    
5318
.create-vm .vm-confirm .confirm-cont {
5319
    width: 30%;
5320
    margin-right: 2%;
5321
    border-right: 1px solid #A1C8DB;
5322
    float: left;
5323
}
5324

    
5325
.create-vm .vm-confirm .confirm-cont ul li {
5326
    padding:0;
5327
    margin:0;
5328
    margin-bottom: 5px;
5329
    border-bottom: 1px solid #EEE;
5330
    padding-bottom: 9px;
5331
    margin-right: 10px;
5332
}
5333

    
5334
.create-vm .vm-confirm .confirm-cont.meta h4 {
5335
    margin-right: 0;
5336
}
5337

    
5338
.create-vm .vm-confirm .confirm-cont.meta {
5339
    margin-right:0;
5340
    border-right: none;
5341
    width: 195px;
5342
}
5343

    
5344
.create-vm .confirm-cont > h4 {
5345
    font-size: 1.2em;
5346
    margin-right: 10px;
5347
    border-bottom: 1px solid #A1C8DB;
5348
    padding-bottom: 5px;
5349
    color: #387693;
5350
}
5351

    
5352
.create-vm .confirm-cont .param.image-name {
5353
    margin-bottom: 0 !important;
5354
    border-bottom: none !important;
5355
}
5356

    
5357
.create-vm .confirm-cont .param h4 {
5358
    margin-bottom: 0px !important;
5359
    font-size: 1.1em !important; 
5360
}
5361

    
5362
.create-vm .confirm-cont .param {
5363
    margin-bottom: 10px !important;
5364
}
5365

    
5366
.create-vm .confirm-cont .value {
5367
    font-weight: bold;
5368
}
5369

    
5370
.create-vm .confirm-cont .param .value {
5371
    font-size: 0.9em;
5372
}
5373

    
5374
.create-vm .confirm-cont .param .title {
5375
    color: #387693;
5376
}
5377

    
5378
.create-vm .confirm-cont .image-description {
5379
    margin-left:0;
5380
}
5381

    
5382
.create-vm .confirm-cont .image-description .value {
5383
    font-weight: normal;
5384
    margin-left: 0 !important;
5385
}
5386

    
5387
.create-vm .confirm-cont .image-description .title {
5388
    display: none;
5389
    font-size: 0.8em;
5390
}
5391

    
5392
.create-vm .confirm-cont.meta .values span {
5393
    display:block;
5394
    float: left;
5395
    margin-right: 4px;
5396
    border: 1px solid #eee;
5397
    padding:3px;
5398
    margin-bottom: 4px;
5399
    font-size: 0.9em;
5400
}
5401

    
5402
.create-vm .confirm-cont.meta .key {
5403
    font-weight: bold;
5404
    font-size: 0.9em;
5405
    display: block;
5406
    margin-bottom: 5px;
5407
}
5408

    
5409
.create-vm .meta input {
5410
    font-size: 0.8em;
5411
}
5412

    
5413
.vm-connect .connect-cont {
5414
    margin-bottom: 20px;
5415
    border-bottom: 1px solid #A1C8DB;
5416
    padding-bottom: 20px;
5417
}
5418

    
5419
.vm-connect .connection-info {
5420
    padding-bottom: 0px;
5421
    margin-bottom: 0;
5422
    border-bottom: none;
5423
}
5424

    
5425
.vm-connect .connection-info .connect a {
5426
    color: #fff;
5427
}
5428

    
5429
.vm-connect .connection-info .connect {
5430
    background-color: #387693;
5431
    color: #fff;
5432
    padding: 10px;
5433
    font-size: 1.2em;
5434
    text-align: center;
5435
}
5436

    
5437
.clip-copy {
5438
    display: block;
5439
    width: 20px;
5440
    height: 20px;
5441
    position: absolute;
5442
    border: 1px solid #387693;
5443
    background-image: url("./clipboard.png");
5444
    background-repeat: no-repeat;
5445
    background-position: center;
5446
    cursor: pointer;
5447
    background-color: #A1C8DB;
5448
}
5449

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