Statistics
| Branch: | Tag: | Revision:

root / ui / static / main.css @ e0e9957e

History | View | Annotate | Download (34.8 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: 1px;
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 8px 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
    width: 200px;
1184
}
1185

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

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

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

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

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

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

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

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

    
1246
#metadata-wizard textarea.edit-meta-value {
1247
    font-style: normal;
1248
    text-align: left;
1249
    color: black;
1250
    margin-top: 2px;
1251
    width:200px;
1252
    height: 49px;
1253
}
1254
 
1255
#metadata-wizard input {
1256
    font-size: 80%;
1257
}
1258

    
1259
#metadata-wizard input.key {
1260
    width: 279px;
1261
    margin-bottom: -3px;
1262
}
1263

    
1264
#metadata-wizard textarea.value {
1265
    width: 267px;
1266
    height: 170px;
1267
    overflow: auto;
1268
}
1269

    
1270
#metadata-wizard .input-enabled {
1271
    color: black;
1272
    text-align: left;
1273
    font-style: normal;
1274
}
1275

    
1276
#metadata-wizard label.meta-value {
1277
    vertical-align: top;
1278
}
1279

    
1280
#metadata-wizard button.save {
1281
    margin: 4px 25px 0 0;
1282
}
1283

    
1284
#metadata-wizard button.cancel, #metadata-wizard #edit-dialog button.close {
1285
    float: left;
1286
    margin: 4px 0 0 25px;
1287
    background-color: #d35f5f;
1288
    border-color: #d35f5f;
1289
}
1290

    
1291
/* notification box */
1292
#error-success, #yes-no {
1293
    height: 150px;
1294
    border: 5px solid #87AADE;
1295
    z-index: 9999;
1296
}
1297

    
1298
#error-success p, #yes-no p, #yes-no button {
1299
    margin-top: 15px;
1300
}
1301

    
1302
#error-success strong {
1303
    color: #F49C1A;
1304
}
1305

    
1306
#error-success div {
1307
    height: 142px;
1308
    overflow-y: auto;
1309
    overflow-x: hidden;
1310
}
1311

    
1312
#error-success .close {
1313
        background-image: url(/static/close.png);
1314
        position: absolute;
1315
        right: -19px;
1316
        top: -20px;
1317
        cursor: pointer;
1318
        height: 35px;
1319
        width: 35px;
1320
}
1321

    
1322
/* Confirmation boxes */
1323
div.confirm_single, div.confirm_multiple {
1324
    display: none;
1325
    background-color: #DCDCDC;
1326
    color: orange;
1327
    font-size: 9pt;
1328
}
1329

    
1330
div.action_error {
1331
    float: right;
1332
    width: 80px;
1333
    height: 60px;
1334
    padding: 5px;
1335
    margin: -2px -175px 0 0;
1336
    display: none;
1337
    background-color: #DCDCDC;
1338
    font-size: 9pt;
1339
    color: black;
1340
    line-height: 1.5;
1341
}
1342

    
1343
div.action_error button.details {
1344
    margin: 5px 0 0 0px;
1345
    padding: 0 15px;
1346
}
1347

    
1348
.orange {
1349
    color: orange;
1350
}
1351

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

    
1362
div.confirm_single button, .action_error button {
1363
    width: 80px !important;
1364
}
1365
div.confirm_single button.yes, div.confirm_multiple button.yes {
1366
    border-color: orange;
1367
    padding: 0 12px;
1368
}
1369

    
1370
div.confirm_single button.yes:hover, div.confirm_multiple button.yes:hover {
1371
    background-color: orange;
1372
}
1373

    
1374
div.confirm_single button.no, div.confirm_multiple button.no {
1375
    padding: 0px 16px;
1376
}
1377

    
1378
div.confirm_single button.no:hover, div.confirm_multiple button.no:hover, div.action_error button.details:hover {
1379
    background-color: #a5a5a5;
1380
}
1381

    
1382
div.confirm_single{
1383
    float: right;
1384
    width: 90px;
1385
    height: 66px;
1386
    margin: -2px -175px 0 0;
1387
}
1388

    
1389
div.confirm_single button.yes {
1390
    margin: 5px 0 0 5px;
1391
}
1392

    
1393
div.confirm_single button.no {
1394
    margin: 16px 0 0 5px;
1395
}
1396

    
1397
div.action_error {
1398
    display: none;
1399
}
1400

    
1401
div.confirm_multiple {
1402
    width: 692px;
1403
    height: 28px;
1404
    margin: 0 0 10px -32px;
1405
}
1406

    
1407
div.confirm_multiple p {
1408
    float: left;
1409
    margin: 7px 0 0 200px;
1410
}
1411

    
1412
div.confirm_multiple button {
1413
    float: right;
1414
    margin: 4px 5px 0 0;
1415
}
1416

    
1417
div.confirm_multiple button.no {
1418
    margin-right: 15px;
1419
}
1420

    
1421
div#user{
1422
    float:right;
1423
    clear: both;
1424
    color: #a0a0a0;
1425
    font-size: 9pt;
1426
    margin-top: 16px;
1427
}
1428

    
1429
div#user a{
1430
    color: #a0a0a0;
1431
    text-decoration: none;
1432
}
1433

    
1434
div#user a.current_lang {
1435
    color: #d3d3d3;
1436
}
1437

    
1438
.separator {
1439
    background-color: #87AADE;
1440
    height: 10px;
1441
    width: 700px;
1442
    margin: 0 0 0 -36px;
1443
}
1444

    
1445
.machine-separator {
1446
    width: 508px;
1447
    height: 1px;
1448
    margin: 15px 0 0 15px;
1449
    background-color: #DCDCDC;
1450
}
1451

    
1452
#mini.separator {
1453
    width: 535px;
1454
    height: 5px;
1455
    margin: 17px 0 17px -36px;
1456
    display: none;
1457
}
1458

    
1459
#disks.separator {
1460
    background-color: #dea842;
1461
}
1462

    
1463
#images.separator {
1464
    background-color: #87a06d;
1465
}
1466

    
1467
#networks.separator {
1468
    background-color: #6c535d;
1469
}
1470

    
1471
#desktops.separator {
1472
    background-color: #dea842;
1473
}
1474

    
1475
#apps.separator {
1476
    background-color: #87a06d;
1477
}
1478

    
1479
.machine-container .separator {
1480
    width: 508px;
1481
    height: 1px;
1482
    margin-top: 2px;
1483
    background-color: #DCDCDC;
1484
    margin-left: 13px;
1485
}
1486

    
1487
.machine h5 {
1488
    margin: -1px 60px 1px 84px;
1489
}
1490

    
1491
.machine .settings {
1492
    margin-top: 9px;
1493
}
1494

    
1495
.editbuttons {
1496
    display: block;
1497
    clear: none;
1498
    width: 40px;
1499
    margin-right:32%;
1500
    margin-top:3px;
1501
    float:right;
1502
    cursor: pointer;
1503
}
1504

    
1505
.editbuttons .save:hover, .editbuttons .cancel:hover {
1506
    background-color: #CCCCCC;
1507
}
1508

    
1509
.editbuttons .cancel:hover {
1510
    background-image: url("../static/cancel-onhover.png");
1511
}
1512

    
1513
.editbuttons .cancel, .editbuttons .save {
1514
    padding-left: 16px;
1515
    padding-top: 2px;
1516
    background-repeat: no-repeat;
1517
    color: transparent;
1518
    font-size: 9pt;
1519
}
1520

    
1521
.editbuttons .cancel {
1522
    background-image: url("../static/cancel.png");
1523
    margin-left: 3px;
1524
}
1525

    
1526
.editbuttons .save {
1527
    background-image: url("../static/save.png");
1528
    margin-left: 1px;
1529
}
1530

    
1531
.editbuttons img {
1532
    float:none !important;
1533
    margin: 0px !important;
1534
}
1535

    
1536
.namecontainer {
1537
    line-height: 22px;
1538
}
1539

    
1540
.nametextbox {
1541
    height: 13px;
1542
    font-size: 95%;
1543
}
1544

    
1545
#spinner {
1546
    background: url("../static/progress.gif");
1547
    height: 31px;
1548
    width: 31px;
1549
    margin-left: 298px;
1550
    margin-top: 160px; 
1551
}
1552

    
1553
/* tables in list view */
1554
div.list div.dataTables_filter,  div.list div.dataTables_filter input{
1555
    font-size: 9pt;
1556
    display: none;
1557
}
1558

    
1559
div.list div.dataTables_filter input{
1560
    height: 12px;
1561
    margin-bottom: 12px;
1562
}
1563

    
1564
div.list table {
1565
    width: 515px;
1566
    font-size: 9pt;
1567
}
1568

    
1569
div.list table tbody td {
1570
        color: #3D3D3D;
1571
        padding:6px;
1572
        background-color: #FFF;
1573
        vertical-align: middle;
1574
}
1575

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

    
1590
div.list table thead .sorting_asc, div.list table thead .sorting_desc {
1591
    background-color: #87AADE;
1592
}
1593

    
1594
div.list table thead .sorting_asc {
1595
        background-image: url(asc.gif);
1596
}
1597

    
1598
div.list table thead .sorting_desc {
1599
        background-image: url(desc.gif);
1600
}
1601

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

    
1613
ul.dropdown-selector {
1614
    background-color: #E6EEEE;
1615
    position: absolute;
1616
    margin-left: 1px;
1617
    display: block;
1618
    top: 255px;
1619
    font-size:9pt;
1620
    width:40px;
1621
}
1622

    
1623
ul.dropdown-selector li {
1624
    padding: 4px;
1625
}
1626

    
1627
ul.dropdown-selector li:hover {
1628
    background-color: #87AADE;
1629
}
1630

    
1631
ul.dropdown-selector li a{
1632
    color: black;
1633
    text-decoration: none;
1634
}
1635

    
1636
div.list table span.imagetag { 
1637
    display: none;
1638
}
1639

    
1640
div.list table thead .vmos {
1641
    width: 20px !important;
1642
    vertical-align:middle;
1643
}
1644

    
1645
div.list table .selection {
1646
        width: 20px !important;
1647
        text-align: left;
1648
    background-image: none;
1649
}
1650

    
1651
div.list table thead .vmflavor {
1652
    width: 100px !important;
1653
}
1654

    
1655
div.list table thead .vmgroup {
1656
    width: 40px !important;
1657
}
1658

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

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

    
1667
.spinner, .wave {
1668
    clear: right;
1669
    height: 20px;
1670
    float:right !important;
1671
    width: 20px;
1672
    margin: 5px 16px 0 15px !important;   
1673
}
1674

    
1675
.hidden {
1676
    display:none;
1677
}
1678

    
1679
div.actions a.selected, div.actions a.selected:hover {
1680
    display:block !important;
1681
    color: orange !important;
1682
}
1683

    
1684
.action_error .message, .action_error .code {
1685
    display: none;
1686
}
1687

    
1688
.fixed {
1689
    margin: 0 0 0 -32px !important;
1690
    bottom: 0;
1691
    position: fixed;
1692
}
1693

    
1694
/* Networks */
1695
#networkscreate {
1696
    background-color: #6C535D;
1697
    color: #FFFFFF;
1698
    cursor: pointer;
1699
    padding: 6px 24px;
1700
    text-decoration: none;
1701
    width: 125px;
1702
}
1703

    
1704
#networks-container {
1705
    min-height: 500px;
1706
}
1707

    
1708
#networks-createcontainer {
1709
    margin-left: -36px;
1710
    margin-top: 17px;  
1711
}
1712

    
1713
div.network a.action-network-add {
1714
    display: none;
1715
}
1716

    
1717
div.network a.action-netowrk-edit {
1718
    display: none;
1719
}
1720

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

    
1725
div.network {
1726
    clear: both;
1727
    color: #666666;
1728
    min-height: 65px;
1729
    margin: 30px 0 0 -30px;
1730
    padding: 3px 20px 0 4px;
1731
    width: 500px;
1732
}
1733

    
1734
#network-template {
1735
    margin: 2px 0 0 -30px;
1736
}
1737

    
1738
div.network-placeholder {
1739
    border-left: 3px solid #FB822F;
1740
    margin-left: 33px;
1741
}
1742

    
1743
.network a, .show-machines, span.ip, .show-firewall {
1744
    color: #3d3d3d;
1745
    font-weight: normal;
1746
    text-decoration: none;
1747
    font-size: 9pt;
1748
}
1749

    
1750
.network a:hover, .show-machines:hover, span.ip:hover, .show-firewall:hover {
1751
    color: #000;
1752
    text-decoration: underline;
1753
    cursor: pointer;
1754
}
1755

    
1756
#networks-container .name {
1757
    text-decoration: none !important;
1758
    margin-bottom: 25px;
1759
    color: #000000;
1760
    margin-top: -4px;
1761
}
1762

    
1763
.state {
1764
    float: right;
1765
}
1766

    
1767
.state div {
1768
    text-align: right;
1769
    margin-right: 3px;
1770
}
1771

    
1772
div.network div.actions {
1773
    float: right;
1774
    width: 100px;
1775
    margin:0px -120px 0 0;
1776
    font-weight: normal;
1777
}
1778

    
1779
div.network div.actions a {
1780
    color: transparent;
1781
    margin: 0 0 5px 8px;
1782
    display: block;
1783
}
1784

    
1785
div.actions a.enabled:hover{
1786
    color: black !important;
1787
    text-decoration: underline;
1788
    display: block;
1789
}
1790

    
1791
.network:hover .actions a {
1792
    color: #3d3d3d;
1793
    display: block;
1794
}
1795

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

    
1801
div.network div.actions a.selected:hover {
1802
    color: orange;
1803
}
1804

    
1805
.network:hover {
1806
    background-color:#dcdcdc;
1807
}
1808

    
1809
#internet-separator {
1810
    width: 510px;
1811
    height: 5px;
1812
    background-color: #6C535D;
1813
    margin-left: -36px;
1814
    margin-top: 20px;
1815
}
1816

    
1817
.network-logos {
1818
    float:left;
1819
    padding-right: 10px;
1820
}
1821

    
1822
#networks-container .settings {
1823
    color: #000000;
1824
}
1825

    
1826
#networks-container .network-type {
1827
    float: right;
1828
    margin-top: -4px;
1829
    margin-right: 15px;
1830
}
1831

    
1832
#networks-container .indicator {
1833
    background-color: #87AADE;
1834
    border-color: white;
1835
    border-style: solid;
1836
    border-width: 2px 3px 2px 2px;
1837
}
1838

    
1839
.state div {
1840
    margin-right: 3px;
1841
    text-align: right;
1842
}
1843

    
1844
div.indicator {
1845
    clear: none;
1846
    float: right;
1847
    height: 11px;
1848
    margin: 3px -1px;
1849
    width: 10px;
1850
}
1851

    
1852
#private-networks {
1853
    margin-top: 20px;
1854
}
1855

    
1856
span.rename-network, span.configure {
1857
    background-repeat: no-repeat;
1858
    color: transparent;
1859
    font-size: 9pt;
1860
    font-weight: normal;
1861
    margin-left: 10px;
1862
    padding-left: 10px;
1863
    text-align: left;
1864
}
1865

    
1866
span.rename-network {
1867
    cursor: pointer;
1868
}
1869

    
1870
div.name:hover span.rename-network {
1871
    color: #3D3D3D;
1872
    margin-top: 0.4em;
1873
    background-image: url(/static/pencil.png);
1874
    background-position: 0 3px;
1875
}
1876

    
1877
.network:hover a.rename {
1878
    color: #3d3d3d;
1879
}
1880

    
1881
.action-network-destroy {
1882
    margin-top: 17px !important;
1883
}
1884

    
1885
.network-separator {
1886
    background-color: #DCDCDC;
1887
    height: 1px;
1888
    margin: 2px 0 0 -5px;
1889
    width: 480px;
1890
}
1891

    
1892
.network-contents {
1893
    margin-left: -4px;
1894
    width: 524px;
1895
    clear: both;
1896
    padding-bottom: 7px;
1897
}
1898

    
1899
.network-machine .state div {
1900
    text-align: left;
1901
}
1902

    
1903
.network-machine {
1904
    margin-left: 34px;
1905
    padding-bottom: 5px;
1906
    padding-left: 5px;
1907
    padding-top: 10px;
1908
    margin-top: 2px;
1909
}
1910

    
1911
.network-machine .logo {
1912
    float:left;
1913
    padding-right: 10px;
1914
    position:relative;
1915
}
1916

    
1917
#networks-container .machine-name {
1918
    text-decoration: none !important;
1919
    margin-bottom: 10px;
1920
    color: #000000;
1921
    margin-top: -4px;
1922
}
1923

    
1924
div.network div.machine-actions {
1925
    float: right;
1926
    width: 100px;
1927
    margin:0px -100px 0 0;
1928
    font-weight: normal;
1929
}
1930

    
1931
.discreet {
1932
    color: #969696;
1933
}
1934

    
1935
.network-contents-start-separator {
1936
    height: 3px;
1937
    background-color: #87AADE;
1938
    margin-bottom: 15px;
1939
    margin-left: 39px;
1940
    width: 428px;
1941
}
1942

    
1943
.network-contents-end-separator {
1944
    height: 3px;
1945
    background-color: #87AADE;
1946
    margin-top: 7px;
1947
    margin-left: 5px;
1948
    width: 498px;
1949
}
1950

    
1951
.network-machine .state {
1952
    margin-right: 18px;
1953
}
1954

    
1955
.network-machine .state .status {
1956
    margin-bottom: 4px;
1957
}
1958

    
1959
.machine-name .name {
1960
    margin-top: -10px !important;
1961
}
1962

    
1963
.machine-name .namecontainer {
1964
    line-height: 18px;
1965
    margin-bottom: 20px;
1966
}
1967

    
1968
.network-machine:hover {
1969
    background-color: #B3B3B3;
1970
}
1971

    
1972
.machines {
1973
    margin: 2px 0 0 39px;
1974
    width: 430px;
1975
    background-color: #B3B3B3;
1976
}
1977

    
1978
div.empty-network-slot {
1979
    height: 54px;
1980
}
1981

    
1982
div.network-remove-machine, div.network-add-machine {
1983
    background-color: #FB822F;
1984
    color: #bc4b00; 
1985
    width:90px;
1986
    float:left;
1987
    margin:34px 0 0 -100px;
1988
}
1989

    
1990
span.remove-icon {
1991
    font-size: 80%;
1992
    margin-left: 15px;
1993
}
1994

    
1995
span.add-icon {
1996
    margin-left: 15px;
1997
}
1998

    
1999
span.remove-icon:hover, span.add-icon:hover {
2000
    cursor:pointer;
2001
    color: #fff;
2002
}
2003

    
2004
div.network-add-machine {
2005
    margin:38px 0 0 0;
2006
}
2007

    
2008
.firewall-on {
2009
    color: #42E342;
2010
}
2011

    
2012
.firewall-off {
2013
    color: #F82E2E;
2014
}
2015

    
2016
div.network-machine div.machine-actions a {
2017
    color: transparent;
2018
    margin: 0 0 5px 8px;
2019
    display: block;
2020
}
2021

    
2022
div.network-machine div.machine-actions a:hover {
2023
    color: black !important;
2024
    text-decoration: underline;
2025
    display: block;
2026
}
2027

    
2028
.network-machine:hover .machine-actions a {
2029
    color: #3d3d3d;
2030
    display: block;
2031
}
2032

    
2033
.firewall-content {
2034
    color: black;
2035
    font-size: 60%;
2036
    margin-left: 60px;
2037
}
2038

    
2039
.firewall-content .checkbox-legends {
2040
    vertical-align: text-top;
2041
}
2042

    
2043
.checkbox-legends a {
2044
    color: black;
2045
    text-decoration: underline;
2046
    font-size: 100%;
2047
}
2048

    
2049
.machine-connect {
2050
    color:black !important;
2051
    text-decoration: underline !important;
2052
}
2053

    
2054
.machine-connect:hover {
2055
    cursor: pointer;
2056
}
2057

    
2058
.firewall-contents-start-separator {
2059
    background-color: #808080;
2060
    height: 2px;
2061
    margin-bottom: 5px;
2062
    width: 365px;
2063
}
2064

    
2065
.firewall-contents-end-separator {
2066
    background-color: #808080;
2067
    height: 2px;
2068
    margin-left: -60px;
2069
    margin-top: 5px;
2070
    width: 425px;
2071
}
2072

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

    
2084
.name-div {
2085
    margin-left: 70px;
2086
    margin-bottom: 20px;
2087
}
2088

    
2089
.machine-name-div {
2090
    margin-bottom: 22px;
2091
    margin-left: 60px;
2092
}
2093

    
2094
/* Metadata */
2095

    
2096
.info-content {
2097
    height: 95px;
2098
    width: 540px;
2099
    margin-top: 10px;
2100
}
2101

    
2102
.metadata-separator {
2103
    background-color: #808080;
2104
    height: 3px;
2105
    margin: 0 0 0 14px;
2106
    width: 492px;
2107
}
2108

    
2109
.metadata-container {
2110
    line-height: 12px;
2111
    margin-left: 14px;
2112
    margin-top: 2px;
2113
    height: 85px;
2114
}
2115

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

    
2126
.vm-stats, .vm-labels {
2127
    width: 109px;
2128
    padding-left: 10px;
2129
}
2130

    
2131
.vm-details {
2132
    width: 129px;
2133
}
2134

    
2135
.vm-metadata {
2136
    padding-left: 10px;
2137
    width: 129px;
2138
    border: none;
2139
}
2140

    
2141
.metadata-left {
2142
    float:left;
2143
    width: 50px;
2144
    height: 60px;
2145
}
2146

    
2147
.metadata-right {
2148
    width: 73px;
2149
    float:left;
2150
    height: 35px;
2151
    padding-left: 5px;
2152
        position:relative;
2153
        overflow:hidden;
2154
}
2155

    
2156
.metadata-right .items {
2157
        position:absolute;
2158
        height:20000em;
2159
}
2160

    
2161
.metadata-keys-container {
2162
    height: 60px;
2163
    float: left;
2164
}
2165

    
2166
a.manage-metadata {
2167
    font-size: 100%;
2168
    color: black;
2169
    margin-left:17px;
2170
    text-decoration: underline;
2171
}
2172

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

    
2177
.metadata-actions .prev,  .metadata-actions .next{
2178
    float:left;
2179
    width:29px;
2180
    height:6px;
2181
    cursor: pointer; 
2182
}
2183

    
2184
.metadata-actions .prev {
2185
    background: url("/static/roll-up.png") no-repeat scroll 0 0 transparent;
2186
}
2187

    
2188
.metadata-actions .next {
2189
    background: url("/static/roll-down.png") no-repeat scroll 0 0 transparent;
2190
}
2191

    
2192
.scrollable {
2193
        position:relative;
2194
        overflow:hidden;
2195
        height: 35px;
2196
        width: 60px;
2197
    margin-bottom:2px;
2198
}
2199

    
2200
.scrollable .items {
2201
        position:absolute;
2202
        height:20000em;
2203
}
2204

    
2205
.metadata-bar {
2206
    float: right !important;
2207
    margin: 1px 7px 0 !important;
2208
}