Statistics
| Branch: | Tag: | Revision:

root / ui / static / main.css @ 99034ed6

History | View | Annotate | Download (34.3 kB)

1
html, body, div, span, applet, object, iframe,
2
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
3
a, abbr, acronym, address, big, cite, code,
4
del, dfn, em, font, img, ins, kbd, q, s, samp,
5
small, strike, strong, sub, sup, tt, var,
6
b, u, i, center,
7
dl, dt, dd, ol, ul, li,
8
fieldset, form, label, legend,
9
table, caption, tbody, tfoot, thead, tr, th, td {
10
        margin: 0;
11
        padding: 0;
12
        border: 0;
13
        font-size: 100%;
14
        vertical-align: baseline;
15
        background: transparent;
16
    font-family: Verdana, 'PT Sans', sans-serif;
17
}
18

    
19
body {
20
        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
}
603

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

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

    
616
.machine .name, .machine .ip {
617
    text-decoration: none !important;
618
}
619

    
620
.oldValue {
621
    display:none;
622
}
623

    
624
.state {
625
    float: right;
626
}
627

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

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

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

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

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

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

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

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

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

    
675
div.machine div.actions a.selected:hover {
676
    color: orange;
677
}
678

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

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

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

    
691
.machine:hover {
692
    background-color:#dcdcdc;
693
}
694

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

    
700
.list .machine img {
701
    margin: 0;
702
}
703

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

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

    
717
.view-separator {
718
    color:#5F8DD3;    
719
}
720

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

    
729
.terminated {
730
    margin-bottom: 17px;
731
}
732

    
733
.terminated .machine .state .status {
734
    color: #666;
735
}
736

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

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

    
747
div.machine-tabs {
748
    margin-top: 1em;
749
}
750

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

    
761
span.rename {
762
    cursor: pointer;
763
}
764

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

    
772

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

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

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

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

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

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

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

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

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

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

    
844
div#view-select a {
845
    color:#5f8dd3;
846
}
847

    
848
a#list:hover {
849
    background: #5f8dd3;
850
}
851

    
852
a#standard:active, a#list:active {
853
    color:white;
854
}
855

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

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

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

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

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

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

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

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

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

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

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

    
903
.machine-type .active {
904
    color: #FFFFFF
905
}
906

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

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

    
917
#machinesview_wrapper.list {
918
    margin-left: -20px;
919
}
920

    
921
#machinesview_wrapper {
922
    min-height: 270px;
923
}
924

    
925
#machinesview_content {
926
    display:none;
927
}
928

    
929
.list-machines {
930
    min-width: 515px;
931
}
932

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

    
944
#welcomeheader {
945
    color:white;
946
}
947

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

    
953
.welcomebody a {
954
    color:black;
955
}
956

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

    
962
.welcomefooter a {
963
    color:black;
964
}
965

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

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

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

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

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

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

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

    
1003
div.list .stopped {
1004
    margin-top: 8px;
1005
}
1006

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

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

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

    
1026
.typehover {
1027
    color: #FFFFFF;
1028
}
1029

    
1030
#label-name {
1031
    margin-top: 15px;
1032
}
1033

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

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

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

    
1068
#wizard #standard-images {
1069
    background-color: #ECECEC;
1070
}
1071

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

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

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

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

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

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

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

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

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

    
1139
#metadata-wizard h3 {
1140
    font-weight:normal;
1141
}
1142

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

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

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

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

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

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

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

    
1179
#metadata-wizard p {
1180
    margin-left: 7px;
1181
}
1182

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

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

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

    
1207
#metadata-wizard button.more-margin {
1208
    margin-top: 6px;
1209
}
1210

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

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

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

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

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

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

    
1252
}
1253

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

    
1257
}
1258

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

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

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

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

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

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

    
1292
#metadata-wizard button.cancel {
1293
    float: left;
1294
    margin: 4px 0 0 25px;
1295
    background-color: #d35f5f;
1296
    border-color: #d35f5f;
1297
}
1298

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

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

    
1310
#error-success strong {
1311
    color: #F49C1A;
1312
}
1313

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

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

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

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

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

    
1356
.orange {
1357
    color: orange;
1358
}
1359

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

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

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

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

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

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

    
1397
div.confirm_single button.yes {
1398
    margin: 5px 0 0 5px;
1399
}
1400

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

    
1405
div.action_error {
1406
    display: none;
1407
}
1408

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

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

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

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

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

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

    
1442
div#user a.current_lang {
1443
    color: #d3d3d3;
1444
}
1445

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

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

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

    
1467
#disks.separator {
1468
    background-color: #dea842;
1469
}
1470

    
1471
#images.separator {
1472
    background-color: #87a06d;
1473
}
1474

    
1475
#networks.separator {
1476
    background-color: #6c535d;
1477
}
1478

    
1479
#desktops.separator {
1480
    background-color: #dea842;
1481
}
1482

    
1483
#apps.separator {
1484
    background-color: #87a06d;
1485
}
1486

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

    
1495
.machine h5 {
1496
    margin: 0px 60px 1px 84px;
1497
}
1498

    
1499
.machine .settings {
1500
    margin-top: 13px;
1501
}
1502

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

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

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

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

    
1532
}
1533

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

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

    
1544
.namecontainer {
1545
    line-height: 13px;
1546
}
1547

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

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

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

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

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

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

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

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

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

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

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

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

    
1631
ul.dropdown-selector li {
1632
    padding: 4px;
1633
}
1634

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

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

    
1644
div.list table span.imagetag { 
1645
    display: none;
1646
}
1647

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

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

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

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

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

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

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

    
1683
.hidden {
1684
    display:none;
1685
}
1686

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

    
1692
.action_error .message, .action_error .code {
1693
    display: none;
1694
}
1695

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

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

    
1712
#networks-container {
1713
    min-height: 500px;
1714
}
1715

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

    
1721
div.network a.action-network-add {
1722
    display: none;
1723
}
1724

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

    
1729
div.network a.action-network-destroy {
1730
    display: none;
1731
}
1732

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

    
1742
#network-template {
1743
    margin: 2px 0 0 -30px;
1744
}
1745

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

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

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

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

    
1771
.state {
1772
    float: right;
1773
}
1774

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

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

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

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

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

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

    
1809
div.network div.actions a.selected:hover {
1810
    color: orange;
1811
}
1812

    
1813
.network:hover {
1814
    background-color:#dcdcdc;
1815
}
1816

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

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

    
1830
#networks-container .settings {
1831
    color: #000000;
1832
}
1833

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

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

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

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

    
1860
#private-networks {
1861
    margin-top: 20px;
1862
}
1863

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

    
1874
span.rename-network {
1875
    cursor: pointer;
1876
}
1877

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

    
1885
.network:hover a.rename {
1886
    color: #3d3d3d;
1887
}
1888

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

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

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

    
1907
.network-machine .state div {
1908
    text-align: left;
1909
}
1910

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

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

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

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

    
1939
.discreet {
1940
    color: #969696;
1941
}
1942

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

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

    
1959
.network-machine .state {
1960
    margin-right: 18px;
1961
}
1962

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

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

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

    
1976
.network-machine:hover {
1977
    background-color: #B3B3B3;
1978
}
1979

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

    
1986
div.empty-network-slot {
1987
    height: 54px;
1988
}
1989

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

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

    
2003
span.add-icon {
2004
    margin-left: 15px;
2005
}
2006

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

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

    
2015
.firewall-on {
2016
    color: #42E342;
2017
}
2018

    
2019
.firewall-off {
2020
    color: #F82E2E;
2021
}
2022

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

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

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

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

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

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

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

    
2061
.machine-connect:hover {
2062
    cursor: pointer;
2063
}
2064

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

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

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

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

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

    
2101
/* Metadata */
2102

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

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

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

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

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

    
2138
.vm-details {
2139
    width: 129px;
2140
}
2141

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

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

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

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

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

    
2173
.metadata-actions, .scrollable {
2174
    padding-left: 5px;
2175
}
2176

    
2177
.scrollable {
2178
        position:relative;
2179
        overflow:hidden;
2180
        height: 35px;
2181
        width: 73px;
2182
}
2183

    
2184
.scrollable .items {
2185
        position:absolute;
2186
        height:20000em;
2187
}
2188

    
2189
.metadata-bar {
2190
    float: right !important;
2191
    margin: 1px 7px 0 !important;
2192
}
2193