Statistics
| Branch: | Tag: | Revision:

root / ui / static / main.css @ 73e25ce2

History | View | Annotate | Download (91.5 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
div.ip, 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 p {
3716
    margin-bottom: 10px;
3717
    font-size: 0.95em;
3718
}
3719

    
3720
.invitations #errors li {
3721
    font-size: 0.85em;
3722
    color: #800000;
3723
}
3724

    
3725
.invitations #errors {
3726
    font-size: 100%;
3727
    color: #f00;
3728
    margin-bottom: 20px;
3729
}
3730

    
3731
#invsent .message {
3732
    font-size: 0.9em;
3733
    padding: 5px;
3734
    margin-top: 10px;
3735
    color: #5CAD54;
3736
}
3737

    
3738
#invsent .errormsg {
3739
    color: #AE2B34;
3740
}
3741

    
3742
#add-name-container {
3743
    margin-bottom: 10px;   
3744
}
3745

    
3746
.add-field-trigger img {
3747
    vertical-align: middle;
3748
}
3749

    
3750
.invitations form {
3751
    margin-bottom: 30px;
3752
}
3753

    
3754
#invsent h3 {
3755
    font-size: 0.8em;
3756
    font-weight: bold;
3757
}
3758

    
3759
#invsent h3 span {
3760
    font-weight: normal;
3761
    font-size: 0.9em;
3762
    margin-right: 5px;
3763
    display: block;
3764
    margin-top: -2px;
3765
}
3766

    
3767
#invsent ul {
3768
    margin-top: 10px;
3769
}
3770

    
3771
#invsent li {
3772
    color: #4085A5;
3773
    font-size: 1.1em;
3774
    padding-top: 0.5em;
3775
    border-bottom: 1px solid #efefef;
3776
    padding-bottom: 0.5em;
3777
    font-size: 0.9em;
3778
    position: relative;
3779
}
3780

    
3781
#invsent li:hover {
3782
    background-color: #efefef;
3783
}
3784

    
3785
#invsent li img {
3786
    position: absolute;
3787
    left:20px;
3788
    bottom: 2px;
3789
}
3790

    
3791
#invsent h3 img {
3792
    float: none;
3793
    vertical-align: middle;
3794
    margin-left: 3px;
3795
}
3796

    
3797
#invsent .name {
3798
    float: left;
3799
    width: 55%;
3800
    padding-left: 20px;
3801
}
3802

    
3803
#invsent .email {
3804
    float: left;
3805
    width: 40%;
3806
}
3807

    
3808
#invsent li.accepted {
3809
    color: #ABD49C;
3810
}
3811

    
3812
#invsent li img {
3813
    margin-left: -20px;
3814
    margin-top: 1px;
3815
}
3816

    
3817
#invsent li img.resend {
3818
    cursor: pointer;
3819
}
3820

    
3821
.invitations #field_email_name {
3822
}
3823

    
3824
#invform #fields input {
3825
    margin-right: 10px;
3826
}
3827

    
3828
.machine-now-building {
3829
    padding-right: 15px !important;
3830
    text-align: justify;
3831
}
3832

    
3833
.sub-text {
3834
    padding-top: 15px;
3835
    padding-right: 15px;
3836
    text-align: justify;
3837
    font-style: italic;
3838
    font-size: 0.8em !important;
3839
}
3840

    
3841
#notification-box a {
3842
    color: #4085A5;
3843
}
3844

    
3845
#notification-box .machine-title img {
3846
    vertical-align: middle;
3847
}
3848

    
3849
#notifiaction-box .password-header {
3850
    margin-bottom: 0 !important;
3851
}
3852

    
3853
#notification-box .password-container a {
3854
    color: #fff;
3855
    text-decoration: underline;
3856
}
3857

    
3858
#notification-box .password-container a:hover {
3859
    background-color: #fff;
3860
    color: #4085A5;
3861
}
3862

    
3863
#notification-box .password-container {
3864
    background: #4085A5;
3865
    border: none;
3866
}
3867

    
3868
#notification-box .password-container .password a {
3869
    font-weight: normal !important;
3870
}
3871

    
3872
#notification-box .cmd {
3873
    color: #fff;
3874
    font-family: monospace;
3875
    font-size: 1.6em;
3876
}
3877

    
3878
.machine-container .separator {
3879
    background-color: #B0D1E0;
3880
}
3881

    
3882
#creation-password-overlay div.password-cont {
3883
    margin: 10px auto;
3884
    padding: 10px;
3885
    border: 2px solid #75B54A;
3886
    background-color: #AADE87;
3887
    color: #447821;
3888
    text-align: left;
3889
    padding-left: 5em;
3890
}
3891

    
3892
#creation-password-overlay {
3893
    position: relative;
3894
}
3895

    
3896
#creation-password-overlay .form-action {
3897
    position: absolute;
3898
    bottom: 15px;
3899
    right: 13px;
3900
    font-size: 0.8em;
3901
}
3902

    
3903
#creation-password-overlay .password {
3904
    font-size: 1.3em;
3905
    font-weight: bold;
3906
    margin-right: 5em;
3907
    float: right;
3908
}
3909

    
3910
.feedback-form .description {
3911
    margin-bottom: 25px;
3912
}
3913

    
3914
.feedback-form label {
3915
    display: block;
3916
    font-weight: bold;
3917
    margin-bottom: 10px;
3918
    font-size: 0.8em;
3919
}
3920

    
3921
.feedback-form .form-actions {
3922
    border-top: none;
3923
}
3924

    
3925
.nospace {
3926
    padding-top: 0 !important;
3927
    padding-bottom: 0 !important;
3928
}
3929

    
3930
.noborder {
3931
    border-top: none !important;
3932
    border-bottom: none !important;
3933
}
3934

    
3935
.overlay .feedback-form .messages.description {
3936
    padding-bottom:0;
3937
    margin-bottom: 0;
3938
}
3939

    
3940
.feedback-form .messages .error-message {
3941
    color: #f00;
3942
}
3943

    
3944
.feedback-form .messages .success-message {
3945
    color: #8AA87F;
3946
}
3947

    
3948
.feedback-form .feedback-message {
3949
    width: 548px;
3950
    height: 200px;
3951
    border: 1px solid #ddd;
3952
    padding: 5px;
3953
}
3954

    
3955
#feedback-form .empty-error-msg {
3956
    display: none;
3957
}
3958

    
3959
#feedback-form .data-text {
3960
    display: none;
3961
}
3962

    
3963
#feedback-form .message {
3964
    display: none;
3965
}
3966

    
3967
#feedback-form label {
3968
    display: block;
3969
    font-size: 0.85em;
3970
    font-weight: bold;
3971
}
3972

    
3973
#feedback-form label.inline {
3974
    display: inline;
3975
    padding-left: 5px;
3976
}
3977

    
3978
#feedback-form p {
3979
    padding: 1em 0;
3980
    color: #444;
3981
    margin-bottom: 10px;
3982
}
3983

    
3984
#feedback-form .description {
3985
    font-style: italic;
3986
    font-size: 0.9em;
3987
    color: #888;
3988
}
3989

    
3990
#feedback-form .feedback-text {
3991
    width: 98%;
3992
    height: 100px;
3993
    margin-top: 10px;
3994
    margin-bottom: 10px;
3995
}
3996

    
3997
#feedback-form .submit-data {
3998
    display: none;
3999
}
4000

    
4001
#feedback-form .submit, #invform .submit {
4002
    background-color: #4085A5;
4003
    color: #fff;
4004
    border: none;
4005
    padding: 5px 16px;
4006
    cursor: pointer;
4007
    font-size: 1em;
4008
    position: relative;
4009
}
4010

    
4011
#feedback .submit {
4012
    float: right;
4013
    right: 10px;
4014
    margin-top: 10px;
4015
}
4016

    
4017

    
4018
#feedback-form .submit:hover, #invform .submit:hover {
4019
    background-color: #549FC3;
4020
}
4021

    
4022
.feedback-intro {
4023
    padding-right: 15px !important;
4024
    text-align: justify;
4025
}
4026

    
4027
.popup-body .message {
4028
    padding: 20px 5px;
4029
    display: none;
4030
}
4031

    
4032
.popup-body .loading {
4033
    color: #fff;
4034
}
4035

    
4036
.popup-body .success {
4037
    color: #1F921A;
4038
}
4039

    
4040
.popup-body .errormsg {
4041
    color: #E32424;
4042
}
4043

    
4044

    
4045
.close-msg-box {
4046
    display: block;
4047
    margin-top: 10px;
4048
    cursor: pointer;
4049
    color: #4085A5;
4050
    text-decoration: underline;
4051
}
4052

    
4053

    
4054
.console .ip-version-label {
4055
    margin: 0 5px;
4056
}
4057

    
4058
.ipv6-text, .ipv4-text {
4059
    font-size: 0.9em;
4060
}
4061

    
4062
.tooltip {
4063
    background-color: #C4DDE9;
4064
    color: #000;
4065
    font-size: 0.7em;
4066
    padding: 0.2em 0.5em;
4067
    border: 1px solid #888;
4068
}
4069

    
4070
/*404 and 500 pages*/
4071

    
4072
.error_page {
4073
    position: relative;
4074
    top: 40px;
4075
    padding-bottom: 140px !important;
4076
}
4077

    
4078
.error_page h1 {
4079
    font-weight: normal;
4080
}
4081

    
4082
.error_page .msg_header {
4083
    margin: 0px;
4084
    font-size: 10em;
4085
    position: absolute;
4086
    left: -5px;
4087
    top: 0px;
4088
    color: #4085A5;
4089
    font-family: arial, verdana;
4090
}
4091

    
4092
.error_page p.error_desc {
4093
    color: #fff;
4094
    font-size: 0.8em;
4095
}
4096

    
4097
.error_page {
4098
    padding-right: 50px !important;
4099
    padding-left: 100px !important;
4100
}
4101

    
4102
.error_page .error_content {
4103
    padding-left: 150px;
4104
    padding-top: 97px;
4105
}
4106

    
4107
.error_page .error_content .links, .info_content .links {
4108
    margin-top: 10px;
4109
    margin-left: 20px;
4110
}
4111

    
4112
.error_page .http_error .code {
4113
    letter-spacing: -10px;
4114
    font-size: 9em;
4115
}
4116

    
4117
.error_page .http_error .msg {
4118
    letter-spacing: -1px;
4119
    font-size: 2em;
4120
}
4121

    
4122
.error_page .http_error {
4123
    position: absolute;
4124
    right: 0px;
4125
    bottom: 0px;
4126
    color: #75B3D0;
4127
    line-height: 1em;
4128
}
4129

    
4130
.error_page .error_content a, .info_content .links a {
4131
    color: #4085A5;
4132
    font-weight: bold;
4133
    margin-right: 10px;
4134
    font-size: 0.9em;
4135
}
4136

    
4137
.error_body #container, .info_body #container {
4138
    background-position: right 200px;
4139
}
4140

    
4141
.info_page h1 {
4142
    color: #4085A5;
4143
    font-size: 2em;
4144
    font-weight: normal;
4145
}
4146

    
4147
.info_page p {
4148
    color: #ffffff;
4149
    margin: 1em 0;
4150
}
4151

    
4152
.info_body p a, .error_body p a{
4153
    color: #4085A5;
4154
    text-decoration: underline;
4155
}
4156

    
4157
.error_404 .http_error .code {
4158
    letter-spacing: -7px;
4159
}
4160

    
4161
.network-progress-indicator {
4162
    position: relative;
4163
    display: none;
4164
}
4165

    
4166
.network-progress-indicator img {
4167
    position: absolute;
4168
    bottom: 44px;
4169
    left: 340px;
4170
}
4171

    
4172

    
4173
.single .progress-message {
4174
    margin-top: 90px;
4175
    font-size: 0.6em;
4176
    padding: 0 10px;
4177
    text-align: center;
4178
}
4179

    
4180
/*metadata keys/values*/
4181
.items .tag-item  {
4182
    display: block;
4183
}
4184

    
4185
.single .items .tag-item .key {
4186
    width: 60px;
4187
}
4188

    
4189
.running .scrollable, .terminated .scrollable {
4190
    height: 42px;
4191
}
4192

    
4193
.items .tag-item .key {
4194
    margin-right: 5px;
4195
    width: 30px;
4196
    display: block;
4197
    float: left;
4198
    color: #000;
4199
}
4200

    
4201
.items .tag-item .value {
4202
    color: #444;
4203
}
4204

    
4205
#machinesview-list {
4206
    display: none;
4207
}
4208

    
4209
#machinesview-single {
4210
    position: relative;
4211
    display: none;
4212
}
4213

    
4214
#machinesview-icon {
4215
    display: none;
4216
}
4217

    
4218
#machinesview-icon, #machinesview-single, #machinesview-list {
4219
    
4220
}
4221

    
4222
tbody.machines .spinner {
4223
    margin-top: 0!important;
4224
    margin: 0 !important;
4225
    float: none !important;
4226
}
4227

    
4228
.slider .slider-point {
4229
    width: 4px;
4230
    height: 3px;
4231
    margin-left: 1px;
4232
    background-color: transparent;
4233
    display: block;
4234
    position: absolute;
4235
    z-index: 10;
4236
    bottom: 0px;
4237
}
4238

    
4239
.slider .slider-point-light {
4240
    background-color: transparent;
4241
}
4242

    
4243
.slider-point-text {
4244
    font-size: 0.6em;
4245
    position: absolute;
4246
    top: 4px;
4247
    border-top: 5px solid #C5DEE9;
4248
    padding: 3px;
4249
    color: #4085A5;
4250
    display: block;
4251
    min-width: 6px;
4252
    text-align: middle;
4253
}
4254

    
4255
.slider .handle {
4256
    z-index: 50;
4257
}
4258

    
4259
.modal p.desc {
4260
    margin: 5px 0;
4261
    margin-left: 37px;
4262
    font-size: 0.8em;
4263
    color: #888;
4264
}
4265

    
4266
.api_overlay_template {
4267
    display: none;
4268
}
4269

    
4270
.api_content .password-container .password {
4271
    color: #fff;
4272
    font-size: 1.1em;
4273
}
4274

    
4275
#disks-pane {
4276
    margin-top: 58px;
4277
}
4278

    
4279
span.resend-msg {
4280
    display: block;
4281
    margin-bottom: 5px;
4282
}
4283

    
4284
.success-msg {
4285
    background-color: #5CAD54;
4286
    color: #fff;
4287
    padding: 0.4em;
4288
    border: 1px solid #ddd;
4289
}
4290

    
4291
.error-msg {
4292
    background-color: #800000;
4293
    color: #fff;
4294
    padding: 0.4em;
4295
    border: 1px solid #ddd;
4296
}
4297

    
4298
.success-msg em, .error-msg em {
4299
    font-weight: bold;
4300
    font-style: normal;
4301
    font-size: 0.9em;
4302
}
4303

    
4304
.pagination {
4305
            font-size: 80%;
4306
        }
4307
        
4308
.pagination a {
4309
    text-decoration: none;
4310
        border: solid 1px #AAE;
4311
        color: #15B;
4312
}
4313

    
4314
.pagination a, .pagination span {
4315
    display: block;
4316
    float: left;
4317
    padding: 0.3em 0.5em;
4318
    margin-right: 5px;
4319
        margin-bottom: 5px;
4320
        min-width:1em;
4321
        text-align:center;
4322
}
4323

    
4324
.pagination .current {
4325
    background: #4085A5;
4326
    color: #fff;
4327
        border: solid 1px #AAE;
4328
}
4329

    
4330
.pagination .current.prev, .pagination .current.next{
4331
        color:#999;
4332
        border-color:#999;
4333
        background:#fff;
4334
}
4335

    
4336
#invsent .pagination {
4337
    margin-top: 10px;
4338
}
4339

    
4340
table.list-machines .wave {
4341
    float: none !important;
4342
    margin: 0 !important;
4343
}
4344

    
4345
.overlay {
4346
    display: none;
4347
}
4348

    
4349
.overlay {
4350
    background-color: #fff;
4351
    border: 2px solid #444;
4352
    text-align: left;
4353

    
4354
    -moz-box-shadow: 0 0 90px 5px #000;
4355
    -webkit-box-shadow: 0 0 90px 5px #000;
4356
    box-shadow: 0 0 90px 5px #000;
4357
    width: 600px;
4358
}
4359

    
4360
.overlay .overlay-content .description.subinfo {
4361
    margin-bottom:0;
4362
    border-bottom: none;
4363
    padding-bottom:0;
4364
    margin-top: 10px;
4365
    padding-top:10px;
4366
    border-top: 1px solid #64a6c4;
4367
    /*border-top: 1px solid #DBE6EB;*/
4368
    font-size: 0.8em;
4369
}
4370

    
4371
.overlay .overlay-content .important {
4372
    color: #800000;
4373
}
4374

    
4375
.overlay .overlay-content .description {
4376
    color: #444;
4377
    border-bottom: 1px solid #64a6c4;
4378
    margin-bottom: 10px;
4379
    padding-bottom: 10px;
4380
    font-size: 0.9em;
4381
    line-height: 1.6em;
4382
}
4383
.overlay .overlay-content .empty-message {
4384
    margin-bottom: 5px;
4385
}
4386

    
4387
.overlay h3.header {
4388
    font-size: 0.9em;
4389
    text-align: left;
4390
    padding: 0.8em;
4391
    padding-left: 1em;
4392
    font-weight: normal;
4393
    border-bottom: 1px solid #ddd;
4394
}
4395

    
4396
.overlay h3.header .title {
4397
    float: left;
4398
}
4399

    
4400
.overlay .container {
4401
    position: relative;
4402
    padding-top: 1em;
4403
    padding: 0.5em;
4404
    background-image: url("./popup-bg.png");
4405
    background-repeat: repeat-x;
4406
}
4407

    
4408
.overlay .content {
4409
    background-color: transparent;
4410
    background-image: url("./popup-inner-bg.png");
4411
    padding: 1em;
4412
    font-size: 0.8em;
4413
    background-repeat: repeat-x;
4414
    -moz-box-shadow: 0 0 1px 1px #888;
4415
    -webkit-box-shadow: 0 0 1px 1px #888;
4416
    box-shadow: 0 0 1px 1px #888;
4417
}
4418

    
4419
.overlay .message {
4420
}
4421

    
4422
.overlay .actions {
4423
    position: absolute;
4424
    right: 0.75em;
4425
    top: 0.6em;
4426
}
4427

    
4428
.overlay .actions span {
4429
    font-size: 0.8em;
4430
    color: #fff;
4431
    cursor: pointer;
4432
    margin-left: 10px;
4433
    display: block;
4434
    float: left;
4435
    background-color: #4085A5;
4436
    padding: 0.2em 0.4em;
4437
}
4438

    
4439
.overlay-error .error-more-details {
4440
    margin-top: 5px;
4441
    max-height: 210px;
4442
    overflow: auto;
4443
}
4444

    
4445
.overlay-error .key.details.expand {
4446
    background-image: url("./plus-8.png");
4447
}
4448

    
4449
.overlay-error .key.details {
4450
    background-color: #5189A3;
4451
    cursor: pointer;
4452
    background-image: url("./minus-8.png");
4453
    background-repeat: no-repeat;
4454
    background-position: 545px;
4455
}
4456

    
4457
.overlay-error .container {
4458
    padding-top: 1.9em;
4459
}
4460

    
4461
.overlay-error .error-details {
4462
    font-size: 0.8em;
4463
    margin-top: 10px;
4464
}
4465

    
4466
.overlay-error .error-details anonymous {
4467
    display: block;
4468
    margin-top: 10px;
4469
}
4470

    
4471
.overlay-error h3.header {
4472
    background-color: #800000;
4473
    color: #fff;
4474
}
4475

    
4476
.overlay-error.non-critical h3.header {
4477
    background-color: #987249;
4478
}
4479

    
4480
.overlay-error span.key {
4481
    font-weight: normal;
4482
    display: block;
4483
    margin-top: 0.5em;
4484
    background-color: #74AEC9;
4485
    color: #fff;
4486
    padding: 0.4em;
4487
    font-size: 0.8em;
4488
    font-weight: bold;
4489
}
4490

    
4491
.overlay-error span.value, .overlay-error div.value {
4492
    padding: 0.4em;
4493
    display: block;
4494
    margin-bottom: 0.3em;
4495
}
4496

    
4497
.overlay h3 .closeme {
4498
    float: right;
4499
    font-size: 0.7em;
4500
    margin-top: 0.2em;
4501
    cursor: pointer;
4502
}
4503

    
4504
.overlay .header .subtitle {
4505
    display: block;
4506
    font-size: 0.8em;
4507
    color: #ddd;
4508
}
4509

    
4510
.overlay .header .subtitle img {
4511
    vertical-align: middle;
4512
    margin-left: 5px;
4513
    margin-bottom: 2px;
4514
}
4515

    
4516
.overlay-info .header {
4517
    background-color: #4085A5;
4518
}
4519

    
4520
.overlay-info .header .title {
4521
    color: #fff;
4522
}
4523

    
4524
.overlay-info .header .closeme {
4525
    color: #fff;
4526
}
4527

    
4528
#loading-view {
4529
    width: 600px;
4530
    margin: 0 auto;
4531
    padding: 20px 0;
4532
    font-size: 0.8em;
4533
}
4534

    
4535
#loading-view .header span {
4536
    font-weight: bold;
4537
    color: #4085A5;
4538
}
4539

    
4540
#loading-view .info {
4541
    color: #ddd;
4542
}
4543

    
4544
.options-list {
4545
    margin-top: 0.5em;
4546
    font-size: 0.8em;
4547
}
4548

    
4549
.options-list.five li {
4550
    float: left;
4551
    display: block;
4552
    width: 20%;
4553
    margin-bottom: 5px;
4554
}
4555

    
4556
.options-list.five li:nth-child(5n) .options-object-cont {
4557
    margin-right: 0;
4558
}
4559

    
4560
.options-object-cont input {
4561
    border: 1px solid #aaa;
4562
    width: 92px;
4563
    padding: 0;
4564
    margin: 0;
4565
    margin-top:3px;
4566
    padding: 2px;
4567
}
4568

    
4569
.options-list.three li {
4570
    float: left;
4571
    display: block;
4572
    width: 33%;
4573
    margin-bottom: 5px;
4574
}
4575

    
4576
.options-list li .options-object-cont {
4577
    padding: 4px;
4578
    margin-right: 4px;
4579
    border: 1px solid #A6D1E6;
4580
    cursor: pointer;
4581
    min-height: 35px;
4582
    position: relative;
4583
}
4584

    
4585
.options-list.three li:nth-child(3n) .options-object-cont {
4586
    margin-right: 0;
4587
}
4588

    
4589
.options-list li.selected .options-object-cont {
4590
    background-color: #4085A5;
4591
    border: 1px solid #fff;
4592
}
4593

    
4594
.options-list li.selected .options-object-cont .title {
4595
    color: #fff;
4596
}
4597

    
4598
.options-list li.options-object .title {
4599
    display: block;
4600
    color: #FF7F2A;
4601
    margin-bottom: 2px;
4602
}
4603

    
4604
.options-list li .option-action {
4605
    display: none;
4606
    position: absolute;
4607
    background-repeat: no-repeat;
4608
}
4609

    
4610
.options-list.five li.editing {
4611
    width: 40%;
4612
}
4613

    
4614
.options-list.five li.editing .value {
4615
    display: none;
4616
}
4617

    
4618
.options-list li .remove {
4619
    background-image: url("./option-action-remove.png");
4620
    width:10px;
4621
    height:10px;
4622
    right:5px;
4623
    bottom: 5px;
4624
}
4625

    
4626
.options-list li .edit {
4627
    background-image: url("./option-action-edit.png");
4628
    width:10px;
4629
    height:10px;
4630
    right:5px;
4631
    top: 5px;
4632
}
4633

    
4634
.options-list li:hover .option-action  {
4635
    display: block;
4636
}
4637

    
4638
.options-list li.options-object .value {
4639
    color: #4085A5;
4640
    margin-top: 5px;
4641
    display: block;
4642
}
4643

    
4644
.options-list li.selected.options-object .value {
4645
    color: #ddd;
4646
}
4647
.options-list li .options-object-cont:hover {
4648
    background-color: #fff;
4649
}
4650

    
4651
.options-list li.selected .options-object-cont:hover {
4652
    background-color: #A6D1E6;
4653
}
4654

    
4655
.options-list li img {
4656
    float: left;
4657
    margin:2px;
4658
    margin-right: 10px;
4659
    padding-bottom:10px;
4660
}
4661

    
4662
#metadata-overlay-content {
4663
    position: relative;
4664
}
4665

    
4666
.vm-meta .editor .predefined .predefined-meta-key:hover {
4667
    background-color: #4e8eac;
4668
    color: #fff;
4669
}
4670

    
4671
.vm-meta .editor .predefined .predefined-meta-key {
4672
    float: left;
4673
    margin-right: 5px;
4674
    padding: 4px;
4675
    display: block;
4676
    cursor: pointer;
4677
}
4678

    
4679
.vm-meta .editor .predefined {
4680
    background-color: #A6D1E6;
4681
    font-size: 0.9em;
4682
    border-top: 1px solid #ddd;
4683
}
4684

    
4685
.vm-meta .editor input {
4686
}
4687
.vm-meta .editor {
4688
    margin-bottom: 10px;
4689
}
4690

    
4691
.vm-meta .editor .form-actions .form-action {
4692
    min-width: 50px;
4693
}
4694

    
4695
.vm-meta .editor .form-field input.meta-key {
4696
    width: 90px;
4697
}
4698

    
4699
.vm-meta .form-field {
4700
    float: left;
4701
}
4702

    
4703
.vm-meta .form-actions .form-action {
4704
    float: left;
4705
    margin-right: 10px;
4706
    height: 11px;
4707
}
4708

    
4709
.vm-meta .editor .form-actions .cancel {
4710
    margin-right: 0;
4711
}
4712

    
4713
.vm-meta .editor .form-actions {
4714
    float: right;
4715
    margin:0;
4716
    padding:0;
4717
    margin-left: 15px;
4718
    margin-top: 0px;
4719
}
4720

    
4721
.vm-meta .editor {
4722
    background-color: rgba(64, 133, 165, 0.898) !important;
4723
    background-color: #649DB8;
4724
    font-size:0.9em;
4725
}
4726

    
4727
.vm-meta .meta-key-title {
4728
    font-size: 1.3em;
4729
    color: #fff;
4730
    margin-bottom: 10px;
4731
    display: none;
4732
    float: left;
4733
}
4734

    
4735
.vm-meta .editor-content {
4736
    padding: 10px;
4737
}
4738

    
4739
.vm-meta .inner-mask {
4740
    background-color: #fff;
4741
    opacity:0.6;
4742
    position: absolute;
4743
    top:0;
4744
    left:0;
4745
}
4746

    
4747
.vm-meta .editor label {
4748
    float: left;
4749
    color: #fff;
4750
    margin-right: 2px;
4751
    padding-top:4px;
4752
    font-size: 0.9em;
4753
}
4754

    
4755
.vm-meta .editor input {
4756
    border: none;
4757
    width: 170px;
4758
    margin-left: 10px;
4759
    font-size: 0.9em;
4760
    padding: 4px;
4761
}
4762

    
4763
.vm-meta li.create .options-object-cont {
4764
    background-color: #B3C9AD ;
4765
    border-color: #788774;
4766
}
4767
.vm-meta li.create .options-object-cont .value,
4768
.vm-meta li.create .options-object-cont .title {
4769
    color: #fff;
4770
}
4771

    
4772

    
4773
.cont-toggler {
4774
    background-image: url("./down-arrow.png");
4775
    background-position: right;
4776
    background-repeat: no-repeat;
4777
    background-color: #A1C8DB;
4778
    display: inline-block;
4779
    border-right: 6px solid #A1C8DB;
4780
    padding:2px;
4781
    padding-right: 14px;
4782
    padding-left:0;
4783
    cursor: pointer;
4784
    color: #fff;
4785
    font-size: 0.9em;
4786
}
4787

    
4788
.cont-toggler .label {
4789
    background-color: #98BDCF;
4790
    padding: 2px;
4791
    padding-left: 5px;
4792
    padding-right: 5px;
4793
}
4794

    
4795
.cont-toggler.open {
4796
    background-color: #98BDCF;
4797
    border-color: #98BDCF;
4798
    background-image: url("./up-arrow.png");
4799
}
4800

    
4801
.cont-toggler.open .label {
4802
    background-color: #4085A5;
4803
}
4804

    
4805
.overlay .form label {
4806
    font-color: #444;
4807
    margin-right: 10px;
4808
}
4809

    
4810
.form-field input {
4811
    border: 1px solid #aaa;
4812
    width: 200px;
4813
    padding: 3px;
4814
}
4815

    
4816
.form-actions {
4817
    margin-top: 5px;
4818
    padding-top:5px;
4819
    border-top: 1px solid #64a6c4;
4820
    font-size: 0.8em;
4821
}
4822

    
4823
.form-actions.plain {
4824
    margin-top: 0px;
4825
    padding-top:0px;
4826
    border-top: 0px;
4827
}
4828

    
4829
.form-action {
4830
    float: right;
4831
    min-width: 140px;
4832
    background-color: #FF7F2A;
4833
    border: 1px solid #FF7F2A;
4834
    text-align: center;
4835
    color: #FFFFFF;
4836
    cursor: pointer;
4837
    padding: 4px;
4838
}
4839

    
4840
.form-action:hover {
4841
    background-color: #FF9955;
4842
    color: #FFF;
4843
}
4844

    
4845
.form-action.prev,
4846
.form-action.cancel {
4847
    background-color: #800;
4848
    border: 1px solid #800;
4849
    float: left;
4850
}
4851

    
4852
.form-action.prev:hover,
4853
.form-action.cancel:hover {
4854
    background-color: #fff;
4855
    color: #800;
4856
}
4857

    
4858
.form-action.next,
4859
.form-action.ok {
4860
    background-color: #080;
4861
    border: 1px solid #080;
4862
}
4863

    
4864
.form-action.next:hover,
4865
.form-action.ok:hover {
4866
    background-color: #fff;
4867
    color: #080;
4868
}
4869

    
4870
.form-action .create,
4871
.form-action .submit {
4872

    
4873
}
4874

    
4875
.form-action.in-progress, button.in-progress {
4876
    background-image: url("./icons/indicators/medium/horizontal-progress.gif");
4877
    background-repeat: no-repeat;
4878
    background-position: center center;
4879
    color: transparent;
4880
}
4881

    
4882
#createvm-overlay-content {
4883
    padding: 0;
4884
}
4885

    
4886
.create-vm .image-details.selected .size {
4887
    color: #eee;
4888
}
4889

    
4890
.create-vm .image-details p {
4891
    font-size: 0.8em;
4892
    padding-left: 27px;
4893
    display:block;
4894
}
4895

    
4896
.create-vm .image-details .size {
4897
    margin-top: 2px;
4898
    font-size: 0.8em;
4899
    color: #aaa;
4900
    position: absolute;
4901
    right:5px;
4902
    top: 5px;
4903
}
4904

    
4905
.create-vm .step-cont {
4906
    margin: 15px;
4907
}
4908

    
4909
.create-vm .create-step-cont {
4910
    min-height: 250px;
4911
    float: left;
4912
    width: 584px;
4913
}
4914

    
4915
.create-vm .create-controls {
4916
    padding: 10px;
4917
    border-top: 1px solid #ddd;
4918
}
4919

    
4920
.create-vm .empty {
4921
    font-size: 0.8em;
4922
    color: #444;
4923
}
4924

    
4925
.create-vm h4 {
4926
    color: #5CA1C0;
4927
    margin-bottom: 0.5em;
4928
    font-family: arial;
4929
}
4930
.create-vm ul li {
4931
    cursor: pointer;
4932
    padding: 4px;
4933
    font-size: 0.9em;
4934
}
4935

    
4936
.create-vm ul li.selected {
4937
    background-color: #5CA1C0;
4938
    color: #fff;
4939
}
4940

    
4941
.create-vm .images-list-cont {
4942
    width: 40%;
4943
    float: left;
4944
    padding-left: 3%;
4945
    padding-right: 3%;
4946
}
4947

    
4948
.create-vm li.role .values .val.selected {
4949
    color: #fff;
4950
    background-color: #5CA1C0;
4951
}
4952

    
4953
.create-vm .images-filter-cont, .create-vm .flavors-predefined-cont {
4954
    width: 18%;
4955
    padding-right: 4%;
4956
    float:left;
4957
    border-right: 1px solid #A1C8DB;
4958
    overflow: auto;
4959
}
4960

    
4961
.create-vm .flavor-options-cont {
4962
    width: 74%;
4963
    float: left;
4964
    margin-left: 20px;
4965
}
4966

    
4967
.create-vm .flavor-options-cont .flavor-options li:hover {
4968
    background-image:-webkit-linear-gradient(top, #E8F4FA, #D1E7F0);
4969
    background-image:linear-gradient(top, #E8F4FA, #D1E7F0);
4970
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E8F4FA', endColorstr='#D1E7F0', GradientType=0);
4971
}
4972

    
4973
.create-vm .flavor-options-cont .flavor-options li.disabled * {
4974
    color: #eee !important;
4975
}
4976

    
4977
.create-vm .flavor-options-cont .flavor-options li.disabled {
4978
    background-image:linear-gradient(top, #aaa, #ddd);
4979
    background-image:-webkit-linear-gradient(top, #aaa, #ddd);
4980
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaaaaa', endColorstr='#dddddd', GradientType=0);
4981
}
4982

    
4983
.create-vm .flavor-options-cont .flavor-options li.selected {
4984
    background-color: #FF9955;
4985
    background-image:linear-gradient(top, #FF9955, #E88B4D);
4986
    background-image:-webkit-linear-gradient(top, #FF9955, #E88B4D);
4987
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9955', endColorstr='#5CA1C0', GradientType=0);
4988
    border: 1px solid #C97943;
4989
}
4990

    
4991
.create-vm .predefined-list li.disabled {
4992
    color: #ddd !important;
4993
}
4994

    
4995
.create-vm .flavor-options-cont .flavor-options li {
4996
    display: block;
4997
    float: left;
4998
    margin-right: 10px;
4999
    padding: 10px 15px;
5000
    border: 1px solid #aaa;
5001
    background-image:-webkit-linear-gradient(top, #D1E7F0, #E8F4FA);
5002
    background-image:linear-gradient(top, #D1E7F0, #E8F4FA);
5003
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D1E7F0', endColorstr='#E8F4FA', GradientType=0);
5004
}
5005

    
5006
.create-vm .flavor-options-cont .flavor-options {
5007
    margin-bottom: 25px;
5008
}
5009

    
5010
.create-vm .flavor-options .metric {
5011
    font-size: 0.8em;
5012
    margin-left: 2px;
5013
}
5014

    
5015
.create-vm .flavor-options span.title {
5016
    color: #444;
5017
}
5018

    
5019
.create-vm .flavor-options span.desc {
5020
    display: block;
5021
    color: #aaa;
5022
    font-weight: normal;
5023
    font-size: 0.8em;
5024
    float: right;
5025
    margin-top: 4px;
5026
}
5027

    
5028
.create-vm .flavor-options .selected .value {
5029
    color: #FFF;
5030
}
5031

    
5032
.create-vm .flavor-options .value {
5033
    font-weight: bold;
5034
    color: #5CA1C0;
5035
}
5036

    
5037
.create-vm .flavor-options-cont h4 {
5038
    border-bottom: 1px solid #A1C8DB;
5039
    padding-bottom: 5px;
5040
}
5041

    
5042
.create-vm .images-info-cont {
5043
    width: 28%;
5044
    padding-left: 3%;
5045
    float: left;
5046
    border-left: 1px solid #A1C8DB;
5047
}
5048

    
5049
.create-vm .images-info-cont h4, .create-vm .vm-confirm .param h4{
5050
    color: #FF9955;
5051
    margin-bottom: 1em;
5052
    font-size: 1.2em;
5053
}
5054

    
5055
.create-vm .images-info-cont span.title {
5056
    color: #4085A5;
5057
    display: block;
5058
    margin-bottom: 2px;
5059
    font-size: 0.8em;
5060
}
5061

    
5062
.create-vm .type-filter li {
5063
    font-size: 0.8em;
5064
    font-weight: bold;
5065
    padding: 4px;
5066
    margin-bottom: 0px;
5067
    
5068
}
5069

    
5070
.create-vm .images-list .image-details:hover {
5071
    background-color: #eee;
5072
}
5073

    
5074
.create-vm .images-list .image-details.selected:hover {
5075
    background-color: #5CA1C0;
5076
}
5077

    
5078
.create-vm .images-list .image-details.selected {
5079
    /*font-weight: bold;*/
5080
}
5081

    
5082
.create-vm .images-list .image-details {
5083
    padding: 6px;
5084
    margin-bottom:4px;
5085
    position: relative;
5086
}
5087

    
5088
.create-vm .images-list .image-details img {
5089
    vertical-align: middle;
5090
    margin-right: 10px;
5091
}
5092

    
5093
.create-vm .images-info-cont .image-detail:last-child p {
5094
    border-bottom: none;
5095
}
5096

    
5097
.create-vm .images-info-cont h4 img {
5098
    vertical-align: middle;
5099
    margin-right: 7px;
5100
    margin-bottom: 5px;
5101
}
5102

    
5103
.create-vm .images-info-cont .description p {
5104
    font-size: 0.8em;
5105
}
5106

    
5107
.create-vm .images-info-cont p {
5108
    margin-bottom: 7px;
5109
    font-size: 0.9em;
5110
    border-bottom: 1px solid #A1C8DB;
5111
    padding-bottom: 7px;
5112
}
5113

    
5114
.create-vm .step-header {
5115
    padding: 10px;
5116
    padding-bottom:0;
5117
    margin-bottom: 10px;
5118
    background-color: #A1C8DB;
5119
    border-bottom: 1px solid #aaa;
5120
    position: relative;
5121
}
5122

    
5123
.create-vm .step-header .header-step .info span.subtitle {
5124
    font-size: 1.2em;
5125
    color: #fff;
5126
    font-weight: bold;
5127
}
5128

    
5129
.create-vm .step-header .header-step .info span {
5130
    float: none;
5131
    text-align: right;
5132
}
5133

    
5134
.create-vm .step-header .header-step .info {
5135
    position: absolute;
5136
    right: 15px;
5137
    top: 20px;
5138
    font-size: 0.8em;
5139
}
5140

    
5141
.create-vm .step-header .header-step span {
5142
    float: left;
5143
    display: block;
5144
}
5145

    
5146
.create-vm .steps-container {
5147
    width: 2000em;
5148
}
5149

    
5150
.create-vm .step-header .header-step .title {
5151
    margin-top: 20px;
5152
    font-size: 1em;
5153
    margin-left: 10px;
5154
}
5155

    
5156
#createvm-overlay-content {
5157
    width: 584px;
5158
    overflow: hidden;
5159
}
5160

    
5161
.create-vm .step-header .header-step .num {
5162
    font-size: 4em;
5163
    margin-bottom: -5px;
5164
    font-family: 'Ubuntu';
5165
    font-weight: normal !important;
5166
}
5167

    
5168
.create-vm .step-header .header-step {
5169
    color: #DCEBF1;
5170
    margin-bottom: -6px;
5171
    width: 25%;
5172
    padding-left: 0%;
5173
    display: block;
5174
    float: left;
5175
}
5176

    
5177
.create-vm .step-header .header-step.current {
5178
    color: #387693;
5179
}
5180

    
5181
.create-vm .image-filters-title {
5182
    margin-top: 1em;
5183
    margin-bottom: 0.5em;
5184
}
5185

    
5186
.create-vm .create-step-cont span.clear {
5187
    font-size: 0.8em;
5188
    font-weight: bold;
5189
    color: #A1C8DB;
5190
    display: block;
5191
}
5192

    
5193
.create-vm .category-filters li {
5194
    float:left;
5195
    display: block;
5196
    padding: 4px;
5197
    background-color: #eee;
5198
    margin-right: 5px;
5199
    font-size: 0.9em;
5200
    margin-bottom: 5px;
5201
}
5202

    
5203
.create-vm .content-cont {
5204
    height: 340px;
5205
    overflow: auto;
5206
}
5207

    
5208
.confirm-cont {
5209
    height: 250px;
5210
}
5211

    
5212
.create-vm .vm-confirm .rename input.rename-field {
5213
    font-size: 1.4em;
5214
    padding: 5px;
5215
    width: 93%;
5216
    padding-left: 30px;
5217
    background-position: 7px center;
5218
    background-repeat: no-repeat;
5219
}
5220

    
5221
.create-vm .vm-confirm .rename label {
5222
    display: block;
5223
}
5224

    
5225
.create-vm .vm-confirm .confirm-conts {
5226
    margin-top: 20px;
5227
}
5228

    
5229
.create-vm .vm-confirm .confirm-cont {
5230
    width: 30%;
5231
    margin-right: 2%;
5232
    border-right: 1px solid #A1C8DB;
5233
    float: left;
5234
}
5235

    
5236
.create-vm .vm-confirm .confirm-cont ul li {
5237
    padding:0;
5238
    margin:0;
5239
    margin-bottom: 5px;
5240
    border-bottom: 1px solid #EEE;
5241
    padding-bottom: 9px;
5242
    margin-right: 10px;
5243
}
5244

    
5245
.create-vm .vm-confirm .confirm-cont.meta h4 {
5246
    margin-right: 0;
5247
}
5248

    
5249
.create-vm .vm-confirm .confirm-cont.meta {
5250
    margin-right:0;
5251
    border-right: none;
5252
    width: 195px;
5253
}
5254

    
5255
.create-vm .confirm-cont > h4 {
5256
    font-size: 1.2em;
5257
    margin-right: 10px;
5258
    border-bottom: 1px solid #A1C8DB;
5259
    padding-bottom: 5px;
5260
    color: #387693;
5261
}
5262

    
5263
.create-vm .confirm-cont .param.image-name {
5264
    margin-bottom: 0 !important;
5265
    border-bottom: none !important;
5266
}
5267

    
5268
.create-vm .confirm-cont .param h4 {
5269
    margin-bottom: 0px !important;
5270
    font-size: 1.1em !important; 
5271
}
5272

    
5273
.create-vm .confirm-cont .param {
5274
    margin-bottom: 10px !important;
5275
}
5276

    
5277
.create-vm .confirm-cont .value {
5278
    font-weight: bold;
5279
}
5280

    
5281
.create-vm .confirm-cont .param .value {
5282
    font-size: 0.9em;
5283
}
5284

    
5285
.create-vm .confirm-cont .param .title {
5286
    color: #387693;
5287
}
5288

    
5289
.create-vm .confirm-cont .image-description {
5290
    margin-left:0;
5291
}
5292

    
5293
.create-vm .confirm-cont .image-description .value {
5294
    font-weight: normal;
5295
    margin-left: 0 !important;
5296
}
5297

    
5298
.create-vm .confirm-cont .image-description .title {
5299
    display: none;
5300
    font-size: 0.8em;
5301
}
5302

    
5303
.create-vm .confirm-cont.meta .values span {
5304
    display:block;
5305
    float: left;
5306
    margin-right: 4px;
5307
    border: 1px solid #eee;
5308
    padding:3px;
5309
    margin-bottom: 4px;
5310
    font-size: 0.8em;
5311
}
5312

    
5313
.create-vm .confirm-cont.meta .key {
5314
    font-weight: bold;
5315
    font-size: 0.9em;
5316
    display: block;
5317
    margin-bottom: 5px;
5318
}
5319

    
5320
.create-vm .meta input {
5321
    font-size: 0.8em;
5322
}