Statistics
| Branch: | Tag: | Revision:

root / ui / static / main.css @ 5110d813

History | View | Annotate | Download (34.4 kB)

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

    
19
body {
20
        line-height: 1;
21
    background: url(../static/degrade-background.png) repeat-x scroll 0 0 #C3C3C3;
22
    margin: 0;
23
}
24

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
355
#wizard a div.image {
356

    
357
}
358

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
594
.machine-container:hover {
595

    
596
}
597

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
774

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
1254
}
1255

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

    
1259
}
1260

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

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

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

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

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

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

    
1294
#metadata-wizard button.cancel, #metadata-wizard #edit-dialog button.close {
1295
    float: left;
1296
    margin: 4px 0 0 25px;
1297
    background-color: #d35f5f;
1298
    border-color: #d35f5f;
1299
}
1300

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

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

    
1312
#error-success strong {
1313
    color: #F49C1A;
1314
}
1315

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

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

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

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

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

    
1358
.orange {
1359
    color: orange;
1360
}
1361

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

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

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

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

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

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

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

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

    
1407
div.action_error {
1408
    display: none;
1409
}
1410

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

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

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

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

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

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

    
1444
div#user a.current_lang {
1445
    color: #d3d3d3;
1446
}
1447

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

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

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

    
1469
#disks.separator {
1470
    background-color: #dea842;
1471
}
1472

    
1473
#images.separator {
1474
    background-color: #87a06d;
1475
}
1476

    
1477
#networks.separator {
1478
    background-color: #6c535d;
1479
}
1480

    
1481
#desktops.separator {
1482
    background-color: #dea842;
1483
}
1484

    
1485
#apps.separator {
1486
    background-color: #87a06d;
1487
}
1488

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

    
1497
.machine h5 {
1498
    margin: 0px 60px 1px 84px;
1499
}
1500

    
1501
.machine .settings {
1502
    margin-top: 13px;
1503
}
1504

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

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

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

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

    
1534
}
1535

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

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

    
1546
.namecontainer {
1547
    line-height: 13px;
1548
}
1549

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

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

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

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

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

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

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

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

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

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

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

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

    
1633
ul.dropdown-selector li {
1634
    padding: 4px;
1635
}
1636

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

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

    
1646
div.list table span.imagetag { 
1647
    display: none;
1648
}
1649

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

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

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

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

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

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

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

    
1685
.hidden {
1686
    display:none;
1687
}
1688

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

    
1694
.action_error .message, .action_error .code {
1695
    display: none;
1696
}
1697

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

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

    
1714
#networks-container {
1715
    min-height: 500px;
1716
}
1717

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

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

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

    
1731
div.network a.action-network-destroy {
1732
    display: none;
1733
}
1734

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

    
1744
#network-template {
1745
    margin: 2px 0 0 -30px;
1746
}
1747

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

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

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

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

    
1773
.state {
1774
    float: right;
1775
}
1776

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

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

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

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

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

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

    
1811
div.network div.actions a.selected:hover {
1812
    color: orange;
1813
}
1814

    
1815
.network:hover {
1816
    background-color:#dcdcdc;
1817
}
1818

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

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

    
1832
#networks-container .settings {
1833
    color: #000000;
1834
}
1835

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

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

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

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

    
1862
#private-networks {
1863
    margin-top: 20px;
1864
}
1865

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

    
1876
span.rename-network {
1877
    cursor: pointer;
1878
}
1879

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

    
1887
.network:hover a.rename {
1888
    color: #3d3d3d;
1889
}
1890

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

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

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

    
1909
.network-machine .state div {
1910
    text-align: left;
1911
}
1912

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

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

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

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

    
1941
.discreet {
1942
    color: #969696;
1943
}
1944

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

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

    
1961
.network-machine .state {
1962
    margin-right: 18px;
1963
}
1964

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

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

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

    
1978
.network-machine:hover {
1979
    background-color: #B3B3B3;
1980
}
1981

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

    
1988
div.empty-network-slot {
1989
    height: 54px;
1990
}
1991

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

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

    
2005
span.add-icon {
2006
    margin-left: 15px;
2007
}
2008

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

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

    
2017
.firewall-on {
2018
    color: #42E342;
2019
}
2020

    
2021
.firewall-off {
2022
    color: #F82E2E;
2023
}
2024

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

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

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

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

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

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

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

    
2063
.machine-connect:hover {
2064
    cursor: pointer;
2065
}
2066

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

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

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

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

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

    
2103
/* Metadata */
2104

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

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

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

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

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

    
2140
.vm-details {
2141
    width: 129px;
2142
}
2143

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

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

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

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

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

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

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

    
2186
.scrollable .items {
2187
        position:absolute;
2188
        height:20000em;
2189
}
2190

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