Statistics
| Branch: | Tag: | Revision:

root / ui / static / main.css @ fe820f73

History | View | Annotate | Download (34.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
        line-height: 1;
21
    background: url(../static/degrade-background.png) repeat-x scroll 0 0 #C3C3C3;
22
    margin: 0;
23
}
24

    
25
ol, ul {
26
        list-style: none;
27
}
28

    
29
blockquote, q {
30
        quotes: none;
31
}
32

    
33
blockquote:before, blockquote:after,
34
q:before, q:after {
35
        content: '';
36
        content: none;
37
}
38

    
39
/* remember to define focus styles! */
40
:focus {
41
    outline: 1px dotted #87AADE;
42
}
43

    
44
/* remember to highlight inserts somehow! */
45
ins {
46
        text-decoration: none;
47
}
48

    
49
del {
50
        text-decoration: line-through;
51
}
52

    
53
/* tables still need 'cellspacing="0"' in the markup */
54
table {
55
        border-collapse: collapse;
56
        border-spacing: 0;
57
}
58

    
59
h5 {
60
    font-weight: normal;
61
    font-size: 9pt;
62
    margin-bottom:3px;
63
}
64

    
65
/* root element for tabs  */
66
ul.css-tabs {
67
        margin: 0 0 0 10px; 
68
    padding: 0;
69
        height:31px;
70
    font-size:32px;        
71
    overflow: hidden;         
72
}
73

    
74
ul.css-tabs .secondary {
75
    position:relative;
76
}
77

    
78
/* single tab */
79
ul.css-tabs li {  
80
        float:left;         
81
        padding:0; 
82
        margin: 0 10px 0 0;  
83
        list-style-type:none;        
84
}
85

    
86
/* link inside the tab. uses a background image */
87
ul.css-tabs a { 
88
        float:left;
89
        display:block;
90
        text-decoration:none;
91
        color:#d2d2d2;
92
        position:relative;
93
        outline:0;
94
    padding: 0 9px 0 13px;
95
    top: 9px;
96
}
97

    
98
ul.css-tabs a#machines {
99
    color: #a3bbc5;
100
}
101

    
102
ul.css-tabs a#machines.current {
103
  color: #87aade;
104
}
105

    
106
ul.css-tabs a#disks {
107
    color: #deb358;
108
}
109

    
110
ul.css-tabs a#disks.current {
111
    color: #dea842;
112
}
113

    
114
ul.css-tabs a#images {
115
    color: #9ba97b;
116
}
117

    
118
ul.css-tabs a#images.current {
119
    color: #87a06d;
120
}
121

    
122
ul.css-tabs a#networks {
123
    color: #bc9399;
124
}
125

    
126
ul.css-tabs a#networks.current {
127
  color: #9d6d6a;
128
}
129

    
130
ul.css-tabs a#files {
131
    color: #a3bbc5;
132
}
133

    
134
ul.css-tabs a#files.current {
135
  color: #87aade;
136
}
137

    
138
ul.css-tabs a#desktops {
139
    color: #deb358;
140
}
141

    
142
ul.css-tabs a#desktops.current {
143
    color: #dea842;
144
}
145

    
146
ul.css-tabs a#apps {
147
    color: #9ba97b;
148
}
149

    
150
ul.css-tabs a#apps.current {
151
    color: #87a06d;
152
}
153

    
154
.more-tabs {
155
    float: right;
156
    margin: -15px 50px 0px 0px;
157
}
158

    
159
.more-tabs:hover {
160
    cursor: pointer;
161
}
162
        
163
/* selected tab */
164
ul.css-tabs a.current {
165
        cursor:default;   
166
    top: 2px !important; 
167
}
168

    
169
/* tab pane */
170
div.css-panes {
171
/*    border-top: 10px solid #87aade;
172
    border-bottom: 10px solid #87aade;  */
173
    background: white;
174
}
175

    
176
.css-panes > div.pane {
177
        display:none;
178
        padding:0px 20px;
179
    margin: 0 1em;
180
}
181

    
182
/* CSS3 border radius for various elements. yea - CSS isn't perfect */
183
.rounded, #sheet input, .error {
184
        border-radius: 5px;
185
        -webkit-border-radius: 5px;
186
        -moz-border-radius: 5px;
187
        -o-border-radius: 5px;
188
        -khtml-border-radius: 5px;
189
}
190

    
191
/* validation error message */
192
.error {
193
        background-color:#E8FF6D;
194
        padding:4px;
195
        -webkit-box-shadow: #000 0 0 9pt;
196
        -moz-box-shadow: #000 0 0 9pt;
197
}
198

    
199
/* nested arrow inside error message. It's 100% CSS. No images. */
200
.error em {
201
        border: 10px solid;
202
        border-color: #E8FF6D transparent transparent;
203
        bottom: -17px;
204
        display: block;
205
        height: 0;
206
        left: 10px;
207
        position: absolute;
208
        width: 0;
209
}
210

    
211
/* input field that caused validation error */
212
.invalid {
213
        background-color: rgba(221, 233, 255, 0.898) !important;
214
}
215

    
216
#create {
217
    background-color: #87aade;
218
    color: #000;
219
    cursor: pointer;
220
    display: none;
221
    padding: 6px 24px;
222
    margin: -8px 0 20px -36px;
223
    width: 125px;
224
    text-decoration: none;
225
}
226

    
227
#create:hover {
228
    background-color: #a8c5f1;
229
}
230

    
231
#header .fatborder{
232
    height: 60px;
233
    background: #999;
234
}
235

    
236
div#wrapper {
237
    width: 700px;
238
    margin: 0em auto;
239
}
240

    
241
.modal {
242
    background-color:#fff;
243
    display:none;
244
    width:30em;
245
    height:20em;
246
    padding:1em;
247
    text-align:left;
248
}
249

    
250
/* scrollable root element */
251
#wizard {        
252
        font-size:9pt;
253
        height:405px;
254
        width:453px;
255
        margin:0px auto;        
256
        overflow:hidden;
257
        position:absolute !important;
258
}  
259

    
260
/* scrollable items */
261
#wizard .items {
262
        width:20000em;        
263
        clear:both;        
264
        position:absolute;        
265
    display:block;
266
    padding: 0;
267
    margin: 0;
268
    border:none;
269
    background:none;
270
}
271

    
272
/* single item */
273
#wizard .page {        
274
    padding: 15px 40px 20px 15px;
275
        width:447px;
276
        float:left;        
277
    display:block;
278
    border:none;
279
    background-color: transparent;
280
}
281

    
282
/* title */
283
#wizard h2 {
284
    color: black;
285
    font-size: 100%;
286
    font-weight: normal;
287
    padding-left: 20px;
288
}
289

    
290
#wizard li {
291
        margin-bottom:1.2em;
292
}
293

    
294
#wizard .pane li {
295
    margin: 0;
296
}
297

    
298
#wizard label {
299
        font-size:16px;        
300
        display:block;
301
    clear: both;
302
}
303

    
304
#wizard label strong {
305
        position:relative;
306
        top:-1px;
307
    font-size: 80%;
308
    font-weight: normal;
309
}
310

    
311
#wizard label em {
312
        font-size:9pt;
313
        color:#666;        
314
        font-style:normal;
315
}
316

    
317
#wizard .text {
318
        width: 270px;
319
        padding: 5px;
320
    margin-top: 10px;
321
        border: 1px solid #ccc;
322
        color: #456;
323
        letter-spacing: 1px;
324
}
325

    
326
#wizard select {
327
        border:1px solid #ccc;
328
        width:94%;        
329
        padding:4px;
330
    display: none;
331
}
332

    
333
#wizard .double label { 
334
        width:50%;
335
        float:left;
336
}
337

    
338
#wizard .double .text {
339
        width:93%;        
340
}
341

    
342
#wizard .clearfix {
343
        clear:left;
344
        padding-top:10px;        
345
}
346

    
347
#wizard .right {
348
        float:right;                
349
}
350

    
351
#wizard .error {
352
        border:1px solid red;                
353
}
354

    
355
#wizard a div.image {
356

    
357
}
358

    
359
#wizard a:hover div.image {
360
    background-color: #999;
361
}
362

    
363
.selecteddiv {
364
    background-color: #999 !important;
365
}
366

    
367
#wizard label a:hover strong {
368
    color: white;
369
}
370

    
371
#wizard div.image span.size {
372
    font-size: 9pt;
373
    color: #666;
374
}
375

    
376
#wizard div.image .radio {
377
    float: left;
378
    margin-top: 10px;
379
}
380

    
381
#wizard div.image span.image-id, #wizard div.image span.description {
382
    font-size: 9pt;
383
    color: #666;
384
    font-weight: normal;
385
    display:inline;
386
}
387

    
388
#wizard a:hover div.image span.image-id, #wizard a:hover div.image span.description, #wizard a:hover div.image span.size {
389
    color: white;
390
}
391

    
392
#wizard .cost {
393
    color: #666;
394
    margin-top: 40px;
395
    clear:both;
396
    padding-left: 15px;
397
    font-size: 95%;
398
}
399

    
400
#wizard #status {
401
        height: 50px;
402
        background: #666;
403
    width: 450px;
404
}
405

    
406
#wizard .headernumber {
407
    font-size: 470%;
408
    font-weight: normal;
409
}
410

    
411
#wizard .headerbody {
412
    font-size: 110%;
413
    font-weight: normal;
414
    display: inline;
415
    margin-top: 20px;
416
    position: absolute;
417
}
418

    
419
#wizard .first {
420
    margin-left: -7px;
421
}
422

    
423
#wizard .third {
424
    margin-top: -2px !important;
425
}
426

    
427
#wizard .topruler {
428
    background-color: #CCCCCC;
429
    border: 0 none;
430
    height: 4px;
431
    margin-left: -1px;
432
    width: 447px;
433
    margin-bottom: 6px;
434
    margin-top: 6px;
435
}
436

    
437
#wizard .bottomruler {
438
    background-color: #CCCCCC;
439
    border: 0 none;
440
    height: 4px;
441
    margin-left: -1px;
442
    width: 447px;
443
    margin-bottom:6px;
444
    margin-top:6px;
445
}
446

    
447
#wizard #cancel {
448
    text-align: center;
449
}
450

    
451
#wizard #start {
452
    text-align: center;
453
    background-color: #FF6600;
454
    border-color: #FF6600;
455
}
456

    
457
#wizard #start:hover {
458
    background-color: #FF9651;
459
    border-color: #FF9651;
460
}
461

    
462
.page ul {
463
    height: 270px;
464
    overflow: auto;
465
}
466

    
467
.panes ul.pane {
468
    height: 220px;
469
}
470

    
471
.page ul.tabs {
472
    overflow: hidden;
473
    height: auto;
474
    margin-bottom: 2px;
475
    margin-top: -5px;
476
}
477

    
478
.page ul.tabs li {
479
    float: right;
480
    margin: 0 0.2em;
481
}
482

    
483
#status li {
484
        float: left;
485
        color: #7D7D7D;
486
    padding: 0px 72px 0 40px;
487
    margin-top: -1px;
488
}
489

    
490
#status li.active .headernumber {
491
    color: #FFFFFF;
492
}
493

    
494
#status li.active .headerbody {
495
    color: #5599FF;
496
}
497

    
498
div.image-container {
499
    border-bottom: 1px solid #CCCCCC;
500
    margin-left: 10px;
501
    margin-right: 10px;
502
}
503

    
504
#page2-container {
505
    background-color: #ECECEC;
506
    padding-top: 25px;
507
    height: 180px;
508
}
509

    
510
#page3-container {
511
    background-color: #ECECEC;
512
    padding-left: 50px;
513
    height: 244px;
514
    margin-bottom: 32px;
515
}
516

    
517
/* slider root element */
518
.slider {
519
    border: 1px solid #666;
520
    cursor: pointer;
521
    display: inline !important;
522
    float: left;
523
    margin: 5px 0 20px 10px;
524
    position: relative;
525
    width: 250px;
526
}
527

    
528
.sliders {
529
    float:left;
530
    width: 40px;
531
    margin-left: 10px;  
532
    margin-top: 3px;
533
}
534

    
535
.units {
536
    padding-left:10px;
537
}
538

    
539
.slider-container {
540
    padding-bottom: 15px;
541
    margin-left: 5px;
542
}
543

    
544
/* drag handle */
545
.handle {
546
    -moz-box-shadow: 0 0 2px #000000;
547
    background: url("../static/h30.png") repeat-x scroll 0 0 #FFFFFF;
548
    border: 1px solid #000000;
549
    cursor: move;
550
    display: block;
551
    height: 10px;
552
    margin-top: -8px;
553
    position: absolute;
554
    width: 8px;
555
}
556

    
557
/* progress bar (enabled with progress: true) */
558
.progress {
559
        height: 3px; 
560
        background-color: #676767;
561
}
562

    
563
/* the input field */
564
.range {
565
        float: left;
566
        font-size: 100%;
567
        margin: -3px 0 0 15px;
568
    padding: 2px 10px 2px 0;
569
        text-align: right;
570
        width: 40px;
571
    border: 1px solid #111111;
572
}
573

    
574
.selectedrange {
575
    border-color: #5599FF;
576
}
577

    
578
#credits-indicator {
579
    background-color: #ECECEC;
580
    float: none;
581
    margin: 0 0 0 10px;
582
    border: 1px solid #999;
583
    color: #222222;
584
}
585

    
586
.machine-container {
587
    min-height: 65px;
588
    margin: 2px 0 0 -32px;
589
    padding: 0 4px 0;
590
    clear: both;
591
    width: 523px;
592
}
593

    
594
.machine-container:hover {
595

    
596
}
597

    
598
div.machine {
599
    color: #666;
600
    min-height: 65px;
601
    padding-right: 15px;
602
    padding-top: 2px;
603
}
604

    
605
.machine a {
606
    color: #3d3d3d;
607
    font-weight: normal;
608
    text-decoration: none;
609
    font-size: 9pt;
610
}
611

    
612
.machine a:hover {
613
    color: #000;
614
    text-decoration: underline;
615
}
616

    
617
.machine .name, .machine .ip {
618
    text-decoration: none !important;
619
    padding-top: 4px;
620
}
621

    
622
.oldValue {
623
    display:none;
624
}
625

    
626
.state {
627
    float: right;
628
}
629

    
630
.state div {
631
    text-align: right;
632
    margin-right: 3px;
633
}
634

    
635
div.machine div.actions {
636
    float: right;
637
    width: 70px;
638
    margin: 0 -80px 0 0;
639
    font-weight: normal;
640
}
641

    
642
div.machine div.actions a {
643
    color: transparent;
644
    margin: 0 0 5px 8px;
645
    display: block;
646
}
647

    
648
div.machine div.actions a.action-shutdown {
649
    margin-bottom: 5px;
650
    display: block;
651
}
652

    
653
div.machine div.actions a.shutdown-padding {
654
    margin-bottom: 22px;
655
}
656

    
657
div.machine div.actions a.destroy-padding {
658
    margin-top: 52px;
659
}
660

    
661
div.actions a.enabled:hover{
662
    color: black !important;
663
    text-decoration: underline;
664
    display: block;
665
}
666

    
667
.machine:hover .actions a {
668
    color: #3d3d3d;
669
    display: block;
670
}
671

    
672
div.machine div.display a{
673
    color: #3d3d3d;
674
    display: block;
675
}
676

    
677
div.machine div.actions a.selected:hover {
678
    color: orange;
679
}
680

    
681
div.running div.machine a.action-start {
682
    display: none;
683
}
684

    
685
div.terminated div.machine a.action-reboot, div.terminated div.machine a.action-shutdown{
686
    display: none;
687
}
688

    
689
div.terminated div.machine div.actions a.action-destroy {
690
    margin-top: 38px;
691
}
692

    
693
.machine:hover {
694
    background-color:#dcdcdc;
695
}
696

    
697
.standard .machine img {
698
    float: left;
699
    margin: 7px 14px 0;
700
}
701

    
702
.list .machine img {
703
    margin: 0;
704
}
705

    
706
div.ip, div.state {
707
    font-size: 9pt;
708
    color: #3d3d3d;
709
}
710

    
711
div.indicator {
712
    width:10px;
713
    height:11px;
714
    margin: 3px -1px;
715
    clear: none;
716
    float:right;
717
}
718

    
719
.view-separator {
720
    color:#5F8DD3;    
721
}
722

    
723
.running .indicator {
724
    border-top: 2px solid white;
725
    border-bottom: 2px solid white;
726
    border-left: 2px solid white;
727
    border-right: 3px solid white;
728
    background-color: #87AADE;
729
}
730

    
731
.terminated {
732
    margin-bottom: 17px;
733
}
734

    
735
.terminated .machine .state .status {
736
    color: #666;
737
}
738

    
739
.machine:hover div.uptime, .machine:hover a.rename, .machine:hover a.configure {
740
    color: #3d3d3d;
741
}
742

    
743
div.uptime {
744
    clear: both;
745
    color: transparent;
746
    margin-left: 1px;
747
}
748

    
749
div.machine-tabs {
750
    margin-top: 1em;
751
}
752

    
753
span.rename, span.configure {
754
    background-repeat: no-repeat;
755
    color: transparent;
756
    font-size: 9pt;
757
    font-weight: normal;
758
    margin-left: 10px;
759
    padding-left: 10px;
760
    text-align: left;
761
}
762

    
763
span.rename {
764
    cursor: pointer;
765
}
766

    
767
div.name:hover span.rename {
768
    color: #3D3D3D;
769
    margin-top: 0.4em;
770
    background-image: url(/static/pencil.png);
771
    background-position: 0 3px;
772
}
773

    
774

    
775
a.settings:hover span.configure {
776
    color: #3D3D3D;
777
}
778

    
779
button {
780
    background-color: #87AADE;
781
    border: 1px solid #87AADE;
782
    color: #FFFFFF;
783
    cursor: pointer;
784
    height: 23px;
785
    width: 120px;
786
}
787

    
788
button.next:hover {
789
    background-color: #68A4FF;
790
    border-color: #68A4FF;
791
}
792

    
793
button.prev:hover {
794
    background-color: #888888;
795
    border-color: #888888;
796
}
797

    
798
button.next {
799
    background-color: #5599FF;
800
    border-color: #5599FF;
801
    text-align: right;
802
}
803

    
804
button.prev {
805
    background-color: #666;
806
    border:none;
807
    margin-left: -1px;
808
    text-align: left;
809
}
810

    
811
.image-logo {
812
    float: left;
813
    margin-right: 1em;
814
    margin-left: 1.5em;
815
    margin-top: 4px;
816
}
817

    
818
div.image {
819
    clear: both;
820
    display: block;
821
    margin-bottom: 3px;
822
    margin-top: 3px;
823
    padding: 5px;
824
}
825

    
826
div#view-select {
827
    float: right;
828
    clear: both;
829
    color: white;
830
    margin-top: -42px;
831
    margin-right: -36px;
832
    font-size: 9pt;
833
    background-color: #87aade;
834
    padding: 5px 10px;
835
    display:none;
836
}
837

    
838
a#standard, a#list, a#single {
839
    text-decoration: none;
840
    height: 15px;
841
    width: 17px;
842
    padding: 1px 8px 2px 9px;
843
    font-size: 11px;
844
}
845

    
846
div#view-select a {
847
    color:#5f8dd3;
848
}
849

    
850
a#list:hover {
851
    background: #5f8dd3;
852
}
853

    
854
a#standard:active, a#list:active {
855
    color:white;
856
}
857

    
858
a#standard {
859
    background: url(/static/icon-view.png) no-repeat -36px 0;
860
}
861

    
862
a#list {
863
    background: url(/static/list-view.png) no-repeat -36px 0;
864
}
865

    
866
a#single {
867
    background: url(/static/single-view.png) no-repeat -36px 0;
868
}
869

    
870
a#standard:hover {
871
    background: url(/static/icon-view.png) no-repeat -18px 0;
872
}
873

    
874
a#list:hover {
875
    background: url(/static/list-view.png) no-repeat -18px 0;
876
}
877

    
878
a#single:hover {
879
    background: url(/static/single-view.png) no-repeat -18px 0;
880
}
881

    
882
a#standard.activelink {
883
    background: url(/static/icon-view.png) no-repeat 0px 0;
884
}
885

    
886
a#list.activelink {
887
    background: url(/static/list-view.png) no-repeat 0px 0;
888
}
889

    
890
a#single.activelink {
891
    background: url(/static/single-view.png) no-repeat 0px 0;
892
}
893

    
894
#machinetype {
895
    background-color: #CCCCCC;
896
    height: 25px;
897
    margin-bottom: 4px !important;
898
}
899

    
900
div.machine-type {
901
    float: left;
902
    margin: 4px 18px 20px;
903
}
904

    
905
.machine-type .active {
906
    color: #FFFFFF
907
}
908

    
909
#machinesview {
910
    min-height: 270px;
911
    margin-top: 30px;
912
}
913

    
914
.list#machinesview {
915
    margin-left: -20px;
916
    display:none;
917
}
918

    
919
#machinesview_wrapper.list {
920
    margin-left: -20px;
921
}
922

    
923
#machinesview_wrapper {
924
    min-height: 270px;
925
}
926

    
927
#machinesview_content {
928
    display:none;
929
}
930

    
931
.list-machines {
932
    min-width: 515px;
933
}
934

    
935
#emptymachineslist {
936
    display:none; 
937
    color: #A0A0A0;
938
    background-image: url(/static/emptydegradebg.png);
939
    width: 400px;
940
    margin-top: 40px;
941
    padding: 5px;
942
    padding-left: 10px;
943
    margin-left: -10px;
944
}
945

    
946
#welcomeheader {
947
    color:white;
948
}
949

    
950
.welcomebody {
951
    color:black;
952
    font-size:80%;
953
}
954

    
955
.welcomebody a {
956
    color:black;
957
}
958

    
959
.welcomefooter {
960
    color:black;
961
    font-size:60%;
962
}
963

    
964
.welcomefooter a {
965
    color:black;
966
}
967

    
968
.emptycreatecontainer {
969
    margin-left: 430px !important;
970
    position: absolute;
971
    margin-top: 40px;
972
    width: 180px;
973
    background-color: #CCCCCC;
974
    padding: 5px;
975
    padding-left: 10px;
976
}
977

    
978
.emptycreate {
979
    margin: 20px 10px 5px 0 !important;
980
}
981

    
982
#createbody {
983
    display:none;
984
    font-size: 80%;
985
}
986

    
987
div.list label img {
988
    margin: 5px 5px -3px 0;
989
}
990

    
991
div.list label {
992
    color: #3D3D3D;
993
    font-size: 9pt;
994
}
995

    
996
div.list .state {
997
    margin-top: 7px;
998
    margin-right: 10px;
999
}
1000

    
1001
div.list table tbody {
1002
    margin-top: 8px;
1003
}
1004

    
1005
div.list .stopped {
1006
    margin-top: 8px;
1007
}
1008

    
1009
/* root element for tabs  */
1010
#wizard ul.tabs { 
1011
    margin-right: -1px;
1012
    float: right;                         
1013
}
1014

    
1015
#wizard div.panes {
1016
    height: 252px;
1017
    margin-bottom: 6px;
1018
    clear:both;
1019
}
1020

    
1021
.typebody {
1022
    font-size: 80%;
1023
    font-weight: normal;
1024
    position: relative;
1025
    top: -3px;
1026
}
1027

    
1028
.typehover {
1029
    color: #FFFFFF;
1030
}
1031

    
1032
#label-name {
1033
    margin-top: 15px;
1034
}
1035

    
1036
/* single tab */
1037
#wizard ul.tabs li {  
1038
    margin-bottom: 0; 
1039
        list-style-type:none;
1040
    float: left;        
1041
}
1042

    
1043
/* link inside the tab. uses a background image */
1044
#wizard ul.tabs a { 
1045
        display:block;
1046
    padding: 0.3em 0.5em 0.5em 0.4em;
1047
        text-decoration:none;
1048
        color: #FFFFFF;
1049
        position:relative;
1050
        top:1px;
1051
        outline:0;
1052
    background-color: #CCCCCC;
1053
    text-align: center;
1054
    width: 100px;
1055
    white-space: nowrap;
1056
}
1057

    
1058
#wizard ul.tabs a:hover {
1059
        color: #FFFFFF;
1060
    background-color:#AAAAAA;
1061
}
1062
        
1063
/* selected tab */
1064
#wizard ul.tabs a.current {
1065
        color: white;
1066
    background-color: #666;        
1067
        cursor: default;
1068
}
1069

    
1070
#wizard #standard-images {
1071
    background-color: #ECECEC;
1072
}
1073

    
1074
div.list div.actions {
1075
    display: none;
1076
    clear: left;
1077
    float: right;
1078
    margin-right: -20px;
1079
    margin-top: 37px;
1080
    text-align: right;
1081
    width: 150px;
1082
}
1083

    
1084
div.list div.actions a {
1085
    clear: left;
1086
    color: #D3D3D3;
1087
    display: block;
1088
    font-size:9pt;
1089
    margin-bottom: 2px;
1090
}
1091

    
1092
div.list div.actions a.enabled {
1093
    color: #3D3D3D;
1094
}
1095

    
1096
div.list div.actions a.enabled:hover{
1097
    cursor: pointer;
1098
    color: black;
1099
    text-decoration: underline;
1100
}
1101

    
1102
input.machine {
1103
    width: 13px;
1104
    height: 13px;
1105
    top: -1px;
1106
    overflow: hidden;
1107
}
1108

    
1109
/* metadata editing scrollable */
1110
#metadata-wizard {
1111
        position:fixed;
1112
        overflow:hidden;
1113
    width:380px;
1114
    height:360px;
1115
    display:none;
1116
    background-color:#fff;
1117
    text-align:left;
1118
    font-size: 80%;
1119
}
1120

    
1121
#metadata-wizard .items {
1122
        width:20000em;
1123
        position:absolute;
1124
        clear:both;
1125
    padding: 0;
1126
    margin: 0;
1127
}
1128

    
1129
#metadata-wizard .page {        
1130
        width:360px;
1131
    padding: 15px 10px 15px 10px;
1132
        float:left;        
1133
    display:block;
1134
    border:none;
1135
}
1136

    
1137
#metadata-wizard div.container {
1138
    height:308px;
1139
}
1140

    
1141
#metadata-wizard h3 {
1142
    font-weight:normal;
1143
}
1144

    
1145
#metadata-wizard hr {
1146
    background-color: #666;
1147
    border: 0 none;
1148
    height: 5px;
1149
    margin: 0; 
1150
}
1151

    
1152
#metadata-wizard hr.topruler {
1153
    margin-top: 5px; 
1154
}
1155

    
1156
#metadata-wizard hr.fatruler {
1157
    height: 20px;
1158
    margin-top: 2px;
1159
    margin-bottom: 20px;
1160
}
1161

    
1162
#metadata-wizard hr.meta-separator {
1163
    margin: 5px 0 2px 0;
1164
}
1165

    
1166
#metadata-wizard div.content {
1167
    height: 248px;
1168
    width: 345px;
1169
    margin-left: 15px;
1170
    overflow: auto;
1171
}
1172

    
1173
#metadata-wizard div.content ul {
1174
    height: 230px;
1175
}
1176

    
1177
#metadata-wizard div.content li {
1178
    margin-bottom: 20px;
1179
}
1180

    
1181
#metadata-wizard p {
1182
    margin-left: 7px;
1183
}
1184

    
1185
#metadata-wizard div.bottomruler {
1186
    background-color: #666;
1187
    height: 20px;
1188
    margin-top: 17px;
1189
}
1190

    
1191
#metadata-wizard button {
1192
    font-size: 80%;
1193
    width: 87px;
1194
    float: right;
1195
    background-color: #5599FF;
1196
    border: 0px solid #5599FF;
1197
    padding: 0;
1198
    text-align: center;
1199
}
1200

    
1201
#metadata-wizard button.remove {
1202
    height: 15px;
1203
    width: 70px;
1204
    background-color: #d35f5f;
1205
    border-color: #d35f5f;
1206
}
1207

    
1208
#metadata-wizard button.edit {
1209
    height: 15px;
1210
    width: 70px;
1211
    background-color: #666;
1212
    border-color: #666;
1213
    margin-top: -12px;
1214
}
1215

    
1216
#metadata-wizard #edit-dialog button.cancel {
1217
    display: none;
1218
    height: 15px;
1219
    width: 70px;
1220
    float: right;
1221
    background-color: #666;
1222
    border-color: #666;
1223
    margin-top: -53px;
1224
}
1225

    
1226
#metadata-wizard #edit-dialog button.save {
1227
    display: none;
1228
    height: 15px;
1229
    width: 70px;
1230
    margin: -18px 0 0 0;
1231
}
1232

    
1233
#metadata-wizard button.create {
1234
    height: 23px;
1235
    margin: 4px 25px 0 0;
1236
}
1237

    
1238
#metadata-wizard input, #metadata-wizard textarea {
1239
    font-style: italic;
1240
    text-align: right;
1241
    color: #ccc;
1242
}
1243

    
1244
#metadata-wizard input.edit-meta-key, #metadata-wizard textarea.edit-meta-value {
1245
    font-style: normal;
1246
    text-align: left;
1247
    color: black;
1248

    
1249
}
1250

    
1251
#metadata-wizard input.edit-meta-key {
1252
    margin-bottom: -4px;
1253

    
1254
}
1255

    
1256
#metadata-wizard textarea.edit-meta-value {
1257
    margin-top: -1px;
1258
}
1259
 
1260
#metadata-wizard input {
1261
    font-size: 80%;
1262
}
1263

    
1264
#metadata-wizard input.key {
1265
    width: 279px;
1266
    margin-bottom: -3px;
1267
}
1268

    
1269
#metadata-wizard textarea.value {
1270
    width: 267px;
1271
    height: 170px;
1272
    overflow: auto;
1273
}
1274

    
1275
#metadata-wizard .input-enabled {
1276
    color: black;
1277
    text-align: left;
1278
    font-style: normal;
1279
}
1280

    
1281
#metadata-wizard label.meta-value {
1282
    vertical-align: top;
1283
}
1284

    
1285
#metadata-wizard button.save {
1286
    margin: 4px 25px 0 0;
1287
}
1288

    
1289
#metadata-wizard button.cancel, #metadata-wizard #edit-dialog button.close {
1290
    float: left;
1291
    margin: 4px 0 0 25px;
1292
    background-color: #d35f5f;
1293
    border-color: #d35f5f;
1294
}
1295

    
1296
/* notification box */
1297
#error-success, #yes-no {
1298
    height: 150px;
1299
    border: 5px solid #87AADE;
1300
    z-index: 9999;
1301
}
1302

    
1303
#error-success p, #yes-no p, #yes-no button {
1304
    margin-top: 15px;
1305
}
1306

    
1307
#error-success strong {
1308
    color: #F49C1A;
1309
}
1310

    
1311
#error-success div {
1312
    height: 142px;
1313
    overflow-y: auto;
1314
    overflow-x: hidden;
1315
}
1316

    
1317
#error-success .close {
1318
        background-image: url(/static/close.png);
1319
        position: absolute;
1320
        right: -19px;
1321
        top: -20px;
1322
        cursor: pointer;
1323
        height: 35px;
1324
        width: 35px;
1325
}
1326

    
1327
/* Confirmation boxes */
1328
div.confirm_single, div.confirm_multiple {
1329
    display: none;
1330
    background-color: #DCDCDC;
1331
    color: orange;
1332
    font-size: 9pt;
1333
}
1334

    
1335
div.action_error {
1336
    float: right;
1337
    width: 80px;
1338
    height: 60px;
1339
    padding: 5px;
1340
    margin: -65px -165px 0 0;
1341
    display: none;
1342
    background-color: #DCDCDC;
1343
    font-size: 9pt;
1344
    color: black;
1345
    line-height: 1.5;
1346
}
1347

    
1348
div.action_error button.details {
1349
    margin: 5px 0 0 0px;
1350
    padding: 0 15px;
1351
}
1352

    
1353
.orange {
1354
    color: orange;
1355
}
1356

    
1357
div.confirm_single button, div.confirm_multiple button, div.action_error button{
1358
    font-size: 9pt;
1359
    background-color: #DCDCDC;
1360
    border: 1px solid #a5a5a5;
1361
    color: #3D3D3D;
1362
    cursor: pointer;
1363
    padding: 0px;
1364
    height: 20px !important;
1365
}
1366

    
1367
div.confirm_single button, .action_error button {
1368
    width: 80px !important;
1369
}
1370
div.confirm_single button.yes, div.confirm_multiple button.yes {
1371
    border-color: orange;
1372
    padding: 0 12px;
1373
}
1374

    
1375
div.confirm_single button.yes:hover, div.confirm_multiple button.yes:hover {
1376
    background-color: orange;
1377
}
1378

    
1379
div.confirm_single button.no, div.confirm_multiple button.no {
1380
    padding: 0px 16px;
1381
}
1382

    
1383
div.confirm_single button.no:hover, div.confirm_multiple button.no:hover, div.action_error button.details:hover {
1384
    background-color: #a5a5a5;
1385
}
1386

    
1387
div.confirm_single{
1388
    float: right;
1389
    width: 90px;
1390
    height: 70px;
1391
    margin: 0 -175px 0 0;
1392
}
1393

    
1394
div.confirm_single button.yes {
1395
    margin: 5px 0 0 5px;
1396
}
1397

    
1398
div.confirm_single button.no {
1399
    margin: 20px 0 0 5px;
1400
}
1401

    
1402
div.action_error {
1403
    display: none;
1404
}
1405

    
1406
div.confirm_multiple {
1407
    width: 692px;
1408
    height: 28px;
1409
    margin: 0 0 10px -32px;
1410
}
1411

    
1412
div.confirm_multiple p {
1413
    float: left;
1414
    margin: 7px 0 0 200px;
1415
}
1416

    
1417
div.confirm_multiple button {
1418
    float: right;
1419
    margin: 4px 5px 0 0;
1420
}
1421

    
1422
div.confirm_multiple button.no {
1423
    margin-right: 15px;
1424
}
1425

    
1426
div#user{
1427
    float:right;
1428
    clear: both;
1429
    color: #a0a0a0;
1430
    font-size: 9pt;
1431
    margin-top: 16px;
1432
}
1433

    
1434
div#user a{
1435
    color: #a0a0a0;
1436
    text-decoration: none;
1437
}
1438

    
1439
div#user a.current_lang {
1440
    color: #d3d3d3;
1441
}
1442

    
1443
.separator {
1444
    background-color: #87AADE;
1445
    height: 10px;
1446
    width: 700px;
1447
    margin: 0 0 0 -36px;
1448
}
1449

    
1450
.machine-separator {
1451
    width: 508px;
1452
    height: 1px;
1453
    margin: 15px 0 0 15px;
1454
    background-color: #DCDCDC;
1455
}
1456

    
1457
#mini.separator {
1458
    width: 535px;
1459
    height: 5px;
1460
    margin: 17px 0 17px -36px;
1461
    display: none;
1462
}
1463

    
1464
#disks.separator {
1465
    background-color: #dea842;
1466
}
1467

    
1468
#images.separator {
1469
    background-color: #87a06d;
1470
}
1471

    
1472
#networks.separator {
1473
    background-color: #6c535d;
1474
}
1475

    
1476
#desktops.separator {
1477
    background-color: #dea842;
1478
}
1479

    
1480
#apps.separator {
1481
    background-color: #87a06d;
1482
}
1483

    
1484
.machine-container .separator {
1485
    width: 508px;
1486
    height: 1px;
1487
    margin-top: 2px;
1488
    background-color: #DCDCDC;
1489
    margin-left: 13px;
1490
}
1491

    
1492
.machine h5 {
1493
    margin: 0px 60px 1px 84px;
1494
}
1495

    
1496
.machine .settings {
1497
    margin-top: 13px;
1498
}
1499

    
1500
.editbuttons {
1501
    display: block;
1502
    clear: none;
1503
    width: 40px;
1504
    margin-right:33%;
1505
    margin-top:1px;
1506
    float:right;
1507
    cursor: pointer;
1508
}
1509

    
1510
.editbuttons .save:hover, .editbuttons .cancel:hover {
1511
    background-color: #CCCCCC;
1512
}
1513

    
1514
.editbuttons .cancel:hover {
1515
    background-image: url("../static/cancel-onhover.png");
1516
}
1517

    
1518
.editbuttons .cancel, .editbuttons .save {
1519
    padding-left: 16px;
1520
    padding-top: 2px;
1521
    background-repeat: no-repeat;
1522
    color: transparent;
1523
    font-size: 9pt;
1524
}
1525
.editbuttons .cancel {
1526
    background-image: url("../static/cancel.png");
1527
    margin-left: 3px;
1528

    
1529
}
1530

    
1531
.editbuttons .save {
1532
    background-image: url("../static/save.png");
1533
    margin-left: 1px;
1534
}
1535

    
1536
.editbuttons img {
1537
    float:none !important;
1538
    margin: 0px !important;
1539
}
1540

    
1541
.namecontainer {
1542
    line-height: 13px;
1543
}
1544

    
1545
.nametextbox {
1546
    height: 13px;
1547
    font-size: 95%;
1548
}
1549

    
1550
#spinner {
1551
    background: url("../static/progress.gif");
1552
    height: 31px;
1553
    width: 31px;
1554
    margin-left: 298px;
1555
    margin-top: 160px; 
1556
}
1557

    
1558
/* tables in list view */
1559
div.list div.dataTables_filter,  div.list div.dataTables_filter input{
1560
    font-size: 9pt;
1561
    display: none;
1562
}
1563

    
1564
div.list div.dataTables_filter input{
1565
    height: 12px;
1566
    margin-bottom: 12px;
1567
}
1568

    
1569
div.list table {
1570
    width: 515px;
1571
    font-size: 9pt;
1572
}
1573

    
1574
div.list table tbody td {
1575
        color: #3D3D3D;
1576
        padding:6px;
1577
        background-color: #FFF;
1578
        vertical-align: middle;
1579
}
1580

    
1581
div.list table thead tr th {
1582
        background-color: #E6EEEE;
1583
        background-image: url(bg.gif);
1584
        background-repeat: no-repeat;
1585
        background-position: right 11px;
1586
    font-weight: normal; 
1587
        border: 1px solid #FFF;
1588
    border-bottom: none;
1589
        padding: 4px;
1590
    text-align: left;
1591
    vertical-align: middle;
1592
        cursor: pointer;
1593
}
1594

    
1595
div.list table thead .sorting_asc, div.list table thead .sorting_desc {
1596
    background-color: #87AADE;
1597
}
1598

    
1599
div.list table thead .sorting_asc {
1600
        background-image: url(asc.gif);
1601
}
1602

    
1603
div.list table thead .sorting_desc {
1604
        background-image: url(desc.gif);
1605
}
1606

    
1607
div.list table .selection div.expand-icon {
1608
        background-image: url(asc.gif);
1609
        background-repeat: no-repeat;
1610
    position: relative;
1611
        cursor: pointer;
1612
    width: 15px;
1613
    height: 4px;
1614
    left: 19px;
1615
    top: -11px;
1616
}
1617

    
1618
ul.dropdown-selector {
1619
    background-color: #E6EEEE;
1620
    position: absolute;
1621
    margin-left: 1px;
1622
    display: block;
1623
    top: 255px;
1624
    font-size:9pt;
1625
    width:40px;
1626
}
1627

    
1628
ul.dropdown-selector li {
1629
    padding: 4px;
1630
}
1631

    
1632
ul.dropdown-selector li:hover {
1633
    background-color: #87AADE;
1634
}
1635

    
1636
ul.dropdown-selector li a{
1637
    color: black;
1638
    text-decoration: none;
1639
}
1640

    
1641
div.list table span.imagetag { 
1642
    display: none;
1643
}
1644

    
1645
div.list table thead .vmos {
1646
    width: 20px !important;
1647
    vertical-align:middle;
1648
}
1649

    
1650
div.list table .selection {
1651
        width: 20px !important;
1652
        text-align: left;
1653
    background-image: none;
1654
}
1655

    
1656
div.list table thead .vmflavor {
1657
    width: 100px !important;
1658
}
1659

    
1660
div.list table thead .vmgroup {
1661
    width: 40px !important;
1662
}
1663

    
1664
div.list table thead .vmstatus {
1665
    width: 50px !important;
1666
}
1667

    
1668
div.list table thead .vmname {
1669
    width: 70px !important;
1670
}
1671

    
1672
.spinner, .wave {
1673
    clear: right;
1674
    height: 20px;
1675
    float:right !important;
1676
    width: 20px;
1677
    margin: 5px 16px 0 15px !important;   
1678
}
1679

    
1680
.hidden {
1681
    display:none;
1682
}
1683

    
1684
div.actions a.selected, div.actions a.selected:hover {
1685
    display:block !important;
1686
    color: orange !important;
1687
}
1688

    
1689
.action_error .message, .action_error .code {
1690
    display: none;
1691
}
1692

    
1693
.fixed {
1694
    margin: 0 0 0 -32px !important;
1695
    bottom: 0;
1696
    position: fixed;
1697
}
1698

    
1699
/* Networks */
1700
#networkscreate {
1701
    background-color: #6C535D;
1702
    color: #FFFFFF;
1703
    cursor: pointer;
1704
    padding: 6px 24px;
1705
    text-decoration: none;
1706
    width: 125px;
1707
}
1708

    
1709
#networks-container {
1710
    min-height: 500px;
1711
}
1712

    
1713
#networks-createcontainer {
1714
    margin-left: -36px;
1715
    margin-top: 17px;  
1716
}
1717

    
1718
div.network a.action-network-add {
1719
    display: none;
1720
}
1721

    
1722
div.network a.action-netowrk-edit {
1723
    display: none;
1724
}
1725

    
1726
div.network a.action-network-destroy {
1727
    display: none;
1728
}
1729

    
1730
div.network {
1731
    clear: both;
1732
    color: #666666;
1733
    min-height: 65px;
1734
    margin: 30px 0 0 -30px;
1735
    padding: 3px 20px 0 4px;
1736
    width: 500px;
1737
}
1738

    
1739
#network-template {
1740
    margin: 2px 0 0 -30px;
1741
}
1742

    
1743
div.network-placeholder {
1744
    border-left: 3px solid #FB822F;
1745
    margin-left: 33px;
1746
}
1747

    
1748
.network a, .show-machines, span.ip, .show-firewall {
1749
    color: #3d3d3d;
1750
    font-weight: normal;
1751
    text-decoration: none;
1752
    font-size: 9pt;
1753
}
1754

    
1755
.network a:hover, .show-machines:hover, span.ip:hover, .show-firewall:hover {
1756
    color: #000;
1757
    text-decoration: underline;
1758
    cursor: pointer;
1759
}
1760

    
1761
#networks-container .name {
1762
    text-decoration: none !important;
1763
    margin-bottom: 25px;
1764
    color: #000000;
1765
    margin-top: -4px;
1766
}
1767

    
1768
.state {
1769
    float: right;
1770
}
1771

    
1772
.state div {
1773
    text-align: right;
1774
    margin-right: 3px;
1775
}
1776

    
1777
div.network div.actions {
1778
    float: right;
1779
    width: 100px;
1780
    margin:0px -120px 0 0;
1781
    font-weight: normal;
1782
}
1783

    
1784
div.network div.actions a {
1785
    color: transparent;
1786
    margin: 0 0 5px 8px;
1787
    display: block;
1788
}
1789

    
1790
div.actions a.enabled:hover{
1791
    color: black !important;
1792
    text-decoration: underline;
1793
    display: block;
1794
}
1795

    
1796
.network:hover .actions a {
1797
    color: #3d3d3d;
1798
    display: block;
1799
}
1800

    
1801
div.network div.display a{
1802
    color: #3d3d3d;
1803
    display: block;
1804
}
1805

    
1806
div.network div.actions a.selected:hover {
1807
    color: orange;
1808
}
1809

    
1810
.network:hover {
1811
    background-color:#dcdcdc;
1812
}
1813

    
1814
#internet-separator {
1815
    width: 510px;
1816
    height: 5px;
1817
    background-color: #6C535D;
1818
    margin-left: -36px;
1819
    margin-top: 20px;
1820
}
1821

    
1822
.network-logos {
1823
    float:left;
1824
    padding-right: 10px;
1825
}
1826

    
1827
#networks-container .settings {
1828
    color: #000000;
1829
}
1830

    
1831
#networks-container .network-type {
1832
    float: right;
1833
    margin-top: -4px;
1834
    margin-right: 15px;
1835
}
1836

    
1837
#networks-container .indicator {
1838
    background-color: #87AADE;
1839
    border-color: white;
1840
    border-style: solid;
1841
    border-width: 2px 3px 2px 2px;
1842
}
1843

    
1844
.state div {
1845
    margin-right: 3px;
1846
    text-align: right;
1847
}
1848

    
1849
div.indicator {
1850
    clear: none;
1851
    float: right;
1852
    height: 11px;
1853
    margin: 3px -1px;
1854
    width: 10px;
1855
}
1856

    
1857
#private-networks {
1858
    margin-top: 20px;
1859
}
1860

    
1861
span.rename-network, span.configure {
1862
    background-repeat: no-repeat;
1863
    color: transparent;
1864
    font-size: 9pt;
1865
    font-weight: normal;
1866
    margin-left: 10px;
1867
    padding-left: 10px;
1868
    text-align: left;
1869
}
1870

    
1871
span.rename-network {
1872
    cursor: pointer;
1873
}
1874

    
1875
div.name:hover span.rename-network {
1876
    color: #3D3D3D;
1877
    margin-top: 0.4em;
1878
    background-image: url(/static/pencil.png);
1879
    background-position: 0 3px;
1880
}
1881

    
1882
.network:hover a.rename {
1883
    color: #3d3d3d;
1884
}
1885

    
1886
.action-network-destroy {
1887
    margin-top: 17px !important;
1888
}
1889

    
1890
.network-separator {
1891
    background-color: #DCDCDC;
1892
    height: 1px;
1893
    margin: 2px 0 0 -5px;
1894
    width: 480px;
1895
}
1896

    
1897
.network-contents {
1898
    margin-left: -4px;
1899
    width: 524px;
1900
    clear: both;
1901
    padding-bottom: 7px;
1902
}
1903

    
1904
.network-machine .state div {
1905
    text-align: left;
1906
}
1907

    
1908
.network-machine {
1909
    margin-left: 34px;
1910
    padding-bottom: 5px;
1911
    padding-left: 5px;
1912
    padding-top: 10px;
1913
    margin-top: 2px;
1914
}
1915

    
1916
.network-machine .logo {
1917
    float:left;
1918
    padding-right: 10px;
1919
    position:relative;
1920
}
1921

    
1922
#networks-container .machine-name {
1923
    text-decoration: none !important;
1924
    margin-bottom: 10px;
1925
    color: #000000;
1926
    margin-top: -4px;
1927
}
1928

    
1929
div.network div.machine-actions {
1930
    float: right;
1931
    width: 100px;
1932
    margin:0px -100px 0 0;
1933
    font-weight: normal;
1934
}
1935

    
1936
.discreet {
1937
    color: #969696;
1938
}
1939

    
1940
.network-contents-start-separator {
1941
    height: 3px;
1942
    background-color: #87AADE;
1943
    margin-bottom: 15px;
1944
    margin-left: 39px;
1945
    width: 428px;
1946
}
1947

    
1948
.network-contents-end-separator {
1949
    height: 3px;
1950
    background-color: #87AADE;
1951
    margin-top: 7px;
1952
    margin-left: 5px;
1953
    width: 498px;
1954
}
1955

    
1956
.network-machine .state {
1957
    margin-right: 18px;
1958
}
1959

    
1960
.network-machine .state .status {
1961
    margin-bottom: 4px;
1962
}
1963

    
1964
.machine-name .name {
1965
    margin-top: -10px !important;
1966
}
1967

    
1968
.machine-name .namecontainer {
1969
    line-height: 18px;
1970
    margin-bottom: 20px;
1971
}
1972

    
1973
.network-machine:hover {
1974
    background-color: #B3B3B3;
1975
}
1976

    
1977
.machines {
1978
    margin: 2px 0 0 39px;
1979
    width: 430px;
1980
    background-color: #B3B3B3;
1981
}
1982

    
1983
div.empty-network-slot {
1984
    height: 54px;
1985
}
1986

    
1987
div.network-remove-machine, div.network-add-machine {
1988
    background-color: #FB822F;
1989
    color: #fff; 
1990
    width:90px;
1991
    float:left;
1992
    margin:34px 0 0 -100px;
1993
}
1994

    
1995
span.remove-icon {
1996
    font-size: 80%;
1997
    margin-left: 15px;
1998
}
1999

    
2000
span.add-icon {
2001
    margin-left: 15px;
2002
}
2003

    
2004
span.remove-icon:hover, span.add-icon:hover {
2005
    cursor:pointer;
2006
}
2007

    
2008
div.network-add-machine {
2009
    margin:38px 0 0 0;
2010
}
2011

    
2012
.firewall-on {
2013
    color: #42E342;
2014
}
2015

    
2016
.firewall-off {
2017
    color: #F82E2E;
2018
}
2019

    
2020
div.network-machine div.machine-actions a {
2021
    color: transparent;
2022
    margin: 0 0 5px 8px;
2023
    display: block;
2024
}
2025

    
2026
div.network-machine div.machine-actions a:hover {
2027
    color: black !important;
2028
    text-decoration: underline;
2029
    display: block;
2030
}
2031

    
2032
.network-machine:hover .machine-actions a {
2033
    color: #3d3d3d;
2034
    display: block;
2035
}
2036

    
2037
.firewall-content {
2038
    color: black;
2039
    font-size: 60%;
2040
    margin-left: 60px;
2041
}
2042

    
2043
.firewall-content .checkbox-legends {
2044
    vertical-align: text-top;
2045
}
2046

    
2047
.checkbox-legends a {
2048
    color: black;
2049
    text-decoration: underline;
2050
    font-size: 100%;
2051
}
2052

    
2053
.machine-connect {
2054
    color:black !important;
2055
    text-decoration: underline !important;
2056
}
2057

    
2058
.machine-connect:hover {
2059
    cursor: pointer;
2060
}
2061

    
2062
.firewall-contents-start-separator {
2063
    background-color: #808080;
2064
    height: 2px;
2065
    margin-bottom: 5px;
2066
    width: 365px;
2067
}
2068

    
2069
.firewall-contents-end-separator {
2070
    background-color: #808080;
2071
    height: 2px;
2072
    margin-left: -60px;
2073
    margin-top: 5px;
2074
    width: 425px;
2075
}
2076

    
2077
.firewall-apply {
2078
    background-color: #666666;
2079
    border: medium none;
2080
    float: right;
2081
    font-size: 105%;
2082
    height: 18px;
2083
    margin-right: 20px;
2084
    margin-top: 3px;
2085
    width: 75px;
2086
}
2087

    
2088
.name-div {
2089
    margin-left: 70px;
2090
    margin-bottom: 20px;
2091
}
2092

    
2093
.machine-name-div {
2094
    margin-bottom: 22px;
2095
    margin-left: 60px;
2096
}
2097

    
2098
/* Metadata */
2099

    
2100
.info-content {
2101
    height: 95px;
2102
    width: 540px;
2103
    margin-top: 10px;
2104
}
2105

    
2106
.metadata-separator {
2107
    background-color: #808080;
2108
    height: 3px;
2109
    margin: 0 0 0 14px;
2110
    width: 492px;
2111
}
2112

    
2113
.metadata-container {
2114
    line-height: 12px;
2115
    margin-left: 14px;
2116
    margin-top: 2px;
2117
    height: 85px;
2118
}
2119

    
2120
.metadata-column {
2121
    border-right: 1px solid #CECECE;
2122
    color: black;
2123
    float: left;
2124
    font-size: 60%;
2125
    margin-top: 3px;
2126
    height: 70px;
2127
    padding-bottom: 5px;
2128
}
2129

    
2130
.vm-stats, .vm-labels {
2131
    width: 109px;
2132
    padding-left: 10px;
2133
}
2134

    
2135
.vm-details {
2136
    width: 129px;
2137
}
2138

    
2139
.vm-metadata {
2140
    padding-left: 10px;
2141
    width: 129px;
2142
    border: none;
2143
}
2144

    
2145
.metadata-left {
2146
    float:left;
2147
    width: 50px;
2148
    height: 65px;
2149
}
2150

    
2151
.metadata-right {
2152
    width: 73px;
2153
    float:left;
2154
    height: 35px;
2155
    padding-left: 5px;
2156
        position:relative;
2157
        overflow:hidden;
2158
}
2159

    
2160
.metadata-right .items {
2161
        position:absolute;
2162
        height:20000em;
2163
}
2164

    
2165
.metadata-keys-container {
2166
    height: 65px;
2167
    float: left;
2168
}
2169

    
2170
a.manage-metadata {
2171
    font-size: 100%;
2172
    color: black;
2173
    margin-left:17px;
2174
    text-decoration: underline;
2175
}
2176

    
2177
.metadata-actions, .scrollable {
2178
    padding-left: 5px;
2179
}
2180

    
2181
.scrollable {
2182
        position:relative;
2183
        overflow:hidden;
2184
        height: 35px;
2185
        width: 73px;
2186
}
2187

    
2188
.scrollable .items {
2189
        position:absolute;
2190
        height:20000em;
2191
}
2192

    
2193
.metadata-bar {
2194
    float: right !important;
2195
    margin: 1px 7px 0 !important;
2196
}