Statistics
| Branch: | Tag: | Revision:

root / ui / static / main.css @ 5593ab62

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
    margin-top: 2px;
1207
}
1208

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

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

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

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

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

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

    
1250
}
1251

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

    
1255
}
1256

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
1530
}
1531

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
2099
/* Metadata */
2100

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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