Statistics
| Branch: | Tag: | Revision:

root / ui / static / main.css @ aeb35dd1

History | View | Annotate | Download (58.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
html {
20
    height: 100%;
21
}
22

    
23
body {
24
    background: url(./body-bg.png) repeat-x scroll 0 0 #FFFFFF;
25
    height: 100%;
26
    text-align:center;
27
}
28

    
29
#container {
30
    position: relative;
31
        margin:0 auto;
32
        width: 100%;
33
        background:#f0f0f0;
34
        height:auto !important;
35
        height:100%;
36
        min-height:100%;
37
    background: url("./body-bg2.png") no-repeat scroll right bottom transparent;
38
}
39

    
40
#header {
41
    height: 93px;
42
    background: url("./header-bg.png") repeat-x scroll 0 0 #FFFFFF;
43
    margin: 0 auto;
44
    width: 700px;
45
    text-align: left;
46
}
47

    
48
#content {
49
    padding-bottom: 183px;
50
    width: 100%;
51
}
52

    
53
div#wrapper {
54
    width: 700px;
55
    margin: 0em auto;
56
    text-align: left;
57
}
58

    
59
#footer {
60
    height: 119px;
61
    background-color: #4085A5;
62
        position:absolute;
63
    left: 0;
64
    bottom: 0;
65
    width:100%;
66
}
67

    
68
ol, ul {
69
    list-style: none;
70
}
71

    
72
blockquote, q {
73
    quotes: none;
74
}
75

    
76
blockquote:before, blockquote:after,
77
q:before, q:after {
78
    content: '';
79
    content: none;
80
}
81

    
82
/* remember to define focus styles! */
83
:focus {
84
    outline: 1px dotted #87AADE;
85
}
86

    
87
/* remember to highlight inserts somehow! */
88
ins {
89
    text-decoration: none;
90
}
91

    
92
del {
93
    text-decoration: line-through;
94
}
95

    
96
/* tables still need 'cellspacing="0"' in the markup */
97
table {
98
    border-collapse: collapse;
99
    border-spacing: 0;
100
}
101

    
102
h5 {
103
    font-weight: normal;
104
    margin-bottom:3px;
105
}
106

    
107
/* root element for tabs  */
108
.tab-name {
109
    background-color: #5CA1C0;
110
    color: #FFFFFF;
111
    float: left;
112
    font-size: 150%;
113
    height: 28px;
114
    padding-top: 3px;
115
    text-align: center;
116
    width: 170px;
117
}
118

    
119
.tab-separator {
120
    background-color: white;
121
    float: left;
122
    width: 2px;
123
    height: 23px;
124
    margin-top: 4px;
125
}
126

    
127
ul.css-tabs {
128
    padding: 0;
129
    height:31px;
130
    background-color: #5CA1C0;
131
}
132

    
133
ul.css-tabs .secondary {
134
    position:relative;
135
}
136

    
137
/* single tab */
138
ul.css-tabs li {
139
    float:left;
140
    padding:0;
141
    list-style-type:none;
142
}
143

    
144
ul.css-tabs .current {
145
    background: #4085A5;
146
}
147

    
148
/* link inside the tab. uses a background image */
149
ul.css-tabs a {
150
    float:left;
151
    display:block;
152
    text-decoration:none;
153
    color:#d2d2d2;
154
    position:relative;
155
    outline:0;
156
    padding: 4px 25px 0;
157
    height: 27px;
158
}
159

    
160
ul.css-tabs a:hover {
161
    background: #74AEC9;
162
}
163

    
164
/* selected tab */
165
ul.css-tabs a.current {
166
    cursor:default;
167
}
168

    
169
ul.css-tabs a.current:hover {
170
    background: #4085A5;
171
}
172
/* tab pane */
173
div.css-panes {
174
/*    border-top: 10px solid #87aade;
175
    border-bottom: 10px solid #87aade;  */
176
    background: transparent;
177
}
178

    
179
.css-panes > div.pane {
180
    display:none;
181
}
182

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

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

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

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

    
217
#beforecreate {
218
    background-color: #FF9955;
219
    float: left;
220
    height: 31px;
221
    margin-left: -13px;
222
    margin-top: -6px;
223
    width: 13px;
224
}
225

    
226
#ie-fix {
227
    z-index: 1000;
228
    position: relative;
229
}
230
#createcontainer {
231
    margin-top: 20px;
232
    margin-bottom: 10px;
233
    z-index: 1000;
234
}
235

    
236
#create {
237
    background-color: #FF7F2A;
238
    color: #000;
239
    cursor: pointer;
240
    padding: 7px 24px;
241
    text-decoration: none;
242
    font-size:100%;
243
}
244

    
245
#create:hover {
246
    background-color: #FF9955;
247
}
248

    
249
#console-header {
250
    height: 67px;
251
    background: url("./header-bg.png") repeat-x scroll 0 0 #FFFFFF;
252
}
253

    
254
.header-logo {
255
    padding-top: 19px;
256
}
257

    
258
div#footer-text a {
259
    color: #FFFFFF;
260
    text-decoration: none;
261
}
262

    
263
div#footer-text{
264
    clear: both;
265
    color: #FFFFFF;
266
    font-size: 75%;
267
    left: 22%;
268
    padding-top: 10px;
269
    position: absolute;
270
    width: 700px;
271
}
272

    
273
#footer-bg {
274
    background: url("./footer-bg.png") no-repeat scroll 0 0 #4085A5;
275
    float:right;
276
    width: 700px;
277
    height: 119px;
278
    background-position:right;
279
}
280

    
281
.modal {
282
    background-color:#fff;
283
    display:none;
284
    width:30em;
285
    padding:1em;
286
    text-align:left;
287
}
288

    
289
/* server wizard scrollable root element and network wizard */
290
#wizard, #networks-wizard {
291
    font-size:75%;
292
    height:405px;
293
    width:453px;
294
    overflow:hidden;
295
    position:absolute !important;
296
}
297

    
298
/* scrollable items */
299
#wizard .items {
300
    width:20000em;
301
    clear:both;
302
    position:absolute;
303
    display:block;
304
    padding: 0;
305
    margin: 0;
306
    border:none;
307
    background:none;
308
}
309

    
310
/* single item */
311
#wizard .page, #networks-wizard div.container {
312
    padding: 0px 40px 20px 15px;
313
    width:447px;
314
    float:left;
315
    display:block;
316
    border:none;
317
    background-color: transparent;
318
}
319

    
320
#networks-wizard div.container {
321
    background-color: #ECF4F8;
322
    width:400px;
323
    height: 180px;
324
    margin-bottom:50px;
325
}
326

    
327
/* title */
328
#wizard h2, #networks-wizard h2 {
329
    color: #FF7B24;
330
    font-size: 100%;
331
    font-style: italic;
332
    font-weight: bold;
333
    padding-left: 37px;
334
    padding-top: 17px;
335
}
336

    
337
#networks-wizard h2 {
338
    margin-top: 15px;
339
}
340

    
341
#wizard li {
342
    margin-bottom:1.2em;
343
}
344

    
345
#wizard .pane li {
346
    margin: 0;
347
}
348

    
349
#wizard label {
350
    font-size:120%;
351
    display:block;
352
    clear: both;
353
}
354

    
355
#wizard label strong {
356
    position:relative;
357
    top:-1px;
358
    font-size: 80%;
359
    font-weight: normal;
360
}
361

    
362
#wizard label em {
363
    font-size:75%;
364
    color:#666;
365
    font-style:normal;
366
}
367

    
368
#wizard .text {
369
    width: 270px;
370
    padding: 5px;
371
    margin-top: 10px;
372
    border: 1px solid #ccc;
373
    color: #456;
374
    letter-spacing: 1px;
375
}
376

    
377
#wizard select {
378
    border:1px solid #ccc;
379
    width:94%;
380
    padding:4px;
381
    display: none;
382
}
383

    
384
#wizard .double label {
385
    width:50%;
386
    float:left;
387
}
388

    
389
#wizard .double .text {
390
    width:93%;
391
}
392

    
393
#wizard .clearfix {
394
    clear:left;
395
    padding-top:10px;
396
}
397

    
398
#wizard .right {
399
    float:right;
400
}
401

    
402
#wizard .error {
403
    border:1px solid red;
404
}
405

    
406
#wizard a:hover div.image {
407
    background-color: #C5DEE9;
408
}
409

    
410
.selecteddiv {
411
    background-color: #C5DEE9 !important;
412
}
413

    
414
#wizard label a:hover strong {
415
    color: black;
416
}
417

    
418
#wizard div.image span.size {
419
    font-size: 75%;
420
    color: #666;
421
}
422

    
423
#wizard div.image .radio {
424
    float: left;
425
    margin-top: 10px;
426
}
427

    
428
#wizard div.image span.image-id, #wizard div.image span.description {
429
    font-size: 75%;
430
    color: #666;
431
    font-weight: normal;
432
    display:inline;
433
}
434

    
435
#wizard a:hover div.image span.image-id, #wizard a:hover div.image span.description, #wizard a:hover div.image span.size {
436
    color: black;
437
}
438

    
439
#wizard .cost {
440
    color: #79A4C1;
441
    margin-top: 40px;
442
    clear:both;
443
    padding-left: 15px;
444
    font-size: 95%;
445
}
446

    
447
#wizard #status {
448
    height: 50px;
449
    background: #4085A5;
450
}
451

    
452
#wizard .headernumber {
453
    font-size: 410%;
454
}
455

    
456
#wizard .headerbody {
457
    font-size: 120%;
458
    font-weight: normal;
459
    display: inline;
460
    top: -15px;
461
    position: relative;
462
}
463

    
464
#wizard .first {
465
    left: -10px;
466
}
467

    
468
#wizard .checked {
469
    color: #64a6c4 !important;
470
}
471

    
472
#wizard .li-2 {
473
    margin-top: -1px !important;
474
}
475

    
476
#wizard .img-check {
477
    margin-bottom: 8px;
478
    margin-left: -8px;
479
}
480

    
481
#wizard .li-1 .img-check {
482
    margin-left: 2px;
483
}
484

    
485
#wizard .topruler, #networks-wizard .topruler {
486
    background-color: #CDE2EC;
487
    border: 0 none;
488
    height: 4px;
489
    margin-left: -1px;
490
    width: 447px;
491
    margin-bottom: 6px;
492
    margin-top: 4px;
493
}
494

    
495
#wizard .bottomruler, #networks-wizard .bottomruler {
496
    background-color: #CDE2EC;
497
    border: 0 none;
498
    height: 4px;
499
    margin-left: -1px;
500
    width: 447px;
501
    margin-bottom:6px;
502
    margin-top:6px;
503
}
504

    
505
#networks-wizard .topruler, #networks-wizard .bottomruler {
506
    width: 455px;
507
    float: left;
508
}
509

    
510
#wizard #cancel, #networks-wizard .cancel {
511
    background-color: #4085A5;
512
    border-color: #4085A5;
513
    text-align: center !important;
514
}
515

    
516
#wizard #cancel:hover, #networks-wizard .cancel:hover {
517
    background-color: #7DB4CD;
518
    border-color: #7DB4CD;
519
}
520

    
521
#wizard #start, #networks-wizard .create {
522
    text-align: center;
523
    background-color: #FF6600;
524
    border-color: #FF6600;
525
}
526

    
527
#wizard .img-next {
528
    margin-right: -4px;
529
    padding-left: 8px;
530
    margin-bottom: -1px;
531
}
532

    
533
#wizard .img-prev {
534
    margin-left: -4px;
535
    padding-right: 8px;
536
    margin-bottom: -1px;
537
}
538

    
539
#networks-wizard .create {
540
    float:right;
541
    width: 140px;
542
}
543

    
544
#wizard #start:hover, #networks-wizard .create:hover {
545
    background-color: #FF9651;
546
    border-color: #FF9651;
547
}
548

    
549
#wizard .separator-end {
550
    background-color: #387693;
551
    height: 5px;
552
    margin-left: -14px;
553
    margin-top: 362px;
554
    width: 550px;
555
}
556

    
557
.page ul {
558
    height: 270px;
559
    overflow: auto;
560
}
561

    
562
.panes ul.pane {
563
    height: 220px;
564
}
565

    
566
#wizard #tabscontainer {
567
    background-color: #CDE2EC;
568
    height: 20px;
569
    width: 448px;
570
}
571

    
572
.page ul.tabs {
573
    overflow: hidden;
574
    height: auto;
575
    margin-bottom: -1px;
576
    margin-top: -1px;
577
}
578

    
579
.page ul.tabs li {
580
    float: right;
581
    margin: 0 0.2em;
582
}
583

    
584
#status li {
585
    float: left;
586
    color: #387693;
587
    padding: 0 1px 0 37px;
588
    bottom: 0px;
589
}
590

    
591
#status li.active .headernumber {
592
    color: #FFFFFF;
593
}
594

    
595
#status li.active .headerbody {
596
    color: #FFFFFF;
597
}
598

    
599
div.image-container {
600
    border-bottom: 1px solid #CCCCCC;
601
    margin-left: 10px;
602
    margin-right: 10px;
603
}
604

    
605
#page2-container {
606
    background-color: #ECF4F8;
607
    height: 193px;
608
    margin-top: 3px;
609
    padding-top: 25px;
610
}
611

    
612
#page3-container {
613
    background-color: #ECF4F8;
614
    height: 245px;
615
    margin-bottom: 32px;
616
    padding-left: 50px;
617
}
618

    
619
/* slider root element */
620
.slider {
621
    border: 1px solid #666;
622
    cursor: pointer;
623
    display: inline !important;
624
    float: left;
625
    margin: 5px 0 20px 10px;
626
    position: relative;
627
    width: 250px;
628
}
629

    
630
.sliders {
631
    float:left;
632
    width: 40px;
633
    margin-left: 10px;
634
    margin-top: 3px;
635
}
636

    
637
.units {
638
    padding-left:10px;
639
}
640

    
641
.slider-container {
642
    padding-bottom: 15px;
643
    margin-left: 5px;
644
}
645

    
646
/* drag handle */
647
.handle {
648
    -moz-box-shadow: 0 0 2px #000000;
649
    background: url("./h30.png") repeat-x scroll 0 0 #FFFFFF;
650
    border: 1px solid #000000;
651
    cursor: move;
652
    display: block;
653
    height: 10px;
654
    margin-top: -8px;
655
    position: absolute;
656
    width: 8px;
657
}
658

    
659
/* progress bar (enabled with progress: true) */
660
.progress {
661
    height: 3px;
662
    background-color: #387693;
663
}
664

    
665
/* the input field */
666
.range {
667
    border: 1px solid #387693;
668
    float: left;
669
    font-size: 100%;
670
    margin: -3px 0 0 15px;
671
    padding: 2px 5px 2px 0;
672
    text-align: right;
673
    width: 50px;
674
}
675

    
676
.selectedrange {
677
    border-color: #5599FF;
678
}
679

    
680
#credits-indicator {
681
    background-color: #ECF4F8;
682
    float: none;
683
    margin: 0 0 0 10px;
684
    border: 1px solid #387693;
685
    color: #387693;
686
}
687

    
688
/* machines */
689
.machine-container {
690
    min-height: 65px;
691
    margin: 2px 0 0 3px;
692
    padding: 0 4px 0;
693
    clear: both;
694
    width: 523px;
695
    position:relative;
696
}
697

    
698
div.machine {
699
    margin-left: -7px;
700
    min-height: 65px;
701
    padding-left: 7px;
702
    padding-right: 5px;
703
    padding-top: 2px;
704
    width: 516px;
705
}
706

    
707
div.machine:hover {
708
    background-color:#A1C8DB !important;
709
}
710

    
711
div.machine.light-background {
712
    background-color:#aed2e3;
713
}
714

    
715
.machine a {
716
    font-weight: normal;
717
    text-decoration: none;
718
}
719

    
720
div.machine-details {
721
    width: 400px;
722
    float:left;
723
}
724

    
725
.machine span.name, .machine a.ip {
726
    font-size: 75%;
727
    color: black;
728
    margin-top: 6px;
729
}
730

    
731
.machine span.name {
732
    font-weight: bold;
733
}
734

    
735
.oldValue {
736
    display:none;
737
}
738

    
739
.state {
740
    float: right;
741
    margin-top: -40px;
742
}
743

    
744
.state div {
745
    text-align: right;
746
    margin-right: 3px;
747
}
748

    
749
/* icon view actions */
750
div.machine div.actions {
751
    float: right;
752
    font-size: 75%;
753
    font-weight: normal;
754
    height: 68px;
755
    position: absolute;
756
    right: -63px;
757
    width: 70px;
758
    top: 0px;
759
}
760

    
761
div.machine div.actions a {
762
    color: transparent;
763
    height: 15px;
764
    width: 180px;
765
    margin: 0 0 2px 8px;
766
    display: block;
767
}
768

    
769
div.machine div.actions a:hover {
770
    background-color:#A1C8DB;
771
    opacity: 0.8;
772
    filter: alpha(opacity = 80);
773
}
774

    
775
div.machine div.actions a.selected {
776
    color: #FF7F2A !important;
777
    width: 50px;
778
}
779

    
780
div.machine div.actions a.selected:hover {
781
    background-color:transparent;
782
}
783

    
784
div.machine div.actions a.action-shutdown {
785
    display: block;
786
}
787

    
788
div.machine div.actions a.shutdown-padding {
789
    margin-bottom: 22px;
790
}
791

    
792
div.action-container {
793
    overflow: visible;
794
}
795

    
796
div.actions a.enabled:hover{
797
    color: black !important;
798
    text-decoration: underline;
799
    display: block;
800
}
801

    
802
div.machine:hover .actions a {
803
    color: black;
804
    display: block;
805
}
806

    
807
div.machine div.display a{
808
    color: black;
809
    display: block;
810
}
811

    
812
div.running div.machine div.actions .disabled {
813
    display: none;
814
}
815

    
816
div.terminated div.machine div.actions .disabled {
817
    display: none;
818
}
819

    
820
div.terminated div.machine div.actions a.action-destroy {
821
    position: absolute;
822
    bottom: 0;
823
}
824

    
825
div.running div.machine div.actions a.action-destroy {
826
    position: absolute;
827
    bottom: 0;
828
}
829

    
830
div.connect-arrow {
831
    background: url(/static/connect-arrow.png) no-repeat;
832
    height: 28px;
833
    width:14px;
834
    position: absolute;
835
}
836

    
837
.machine div.connect-arrow {
838
    display: none;
839
    left: -3px;
840
    position: absolute;
841
    top: 9px;
842
}
843

    
844
div.connect-arrow:hover, div.connect-arrow.border-hover, div.connect-arrow-ie, div.connect-arrow.border-ie {
845
    cursor: pointer;
846
    background: url(/static/connect-arrow-hover.png) no-repeat;
847
    height: 28px;
848
    width:26px;
849
}
850

    
851
div.connect-border {
852
    opacity: 0.8;
853
    filter: alpha(opacity = 80);
854
    background-color:#4fe0c3;
855
    height:28px;
856
    width: 12px;
857
    position: absolute;
858
}
859

    
860
.machine div.connect-border {
861
    display: none;
862
    left: -15px;
863
    position: absolute;
864
    top: 9px;
865
}
866

    
867
.standard .machine img {
868
    float: left;
869
    margin: 4px 14px 0;
870
}
871

    
872
.standard .running .machine img {
873
   cursor: pointer;
874
}
875

    
876
.list .machine img {
877
    margin: 0;
878
}
879

    
880
div.ip, div.ips {
881
    font-size: 75%;
882
    position: relative;
883
    top: 4px;
884
    float: right;
885
    right: 18px;
886
}
887

    
888
div.indicators {
889
    margin-right: 2px !important;
890
}
891
div.indicator1, div.indicator2, div.indicator3, div.indicator4 {
892
    background-color: #447821;
893
    width:10px;
894
    height:11px;
895
    clear: none;
896
    float:right;
897
}
898

    
899
.view-separator {
900
    color:#5F8DD3;
901
}
902

    
903
.running {
904
    background: url("./running-bg.png") repeat scroll 0 0 transparent;
905
    margin-top: -76px;
906
    padding-bottom: 15px;
907
    width: 699px;
908
    padding-top: 60px;
909
}
910

    
911
.running-state .indicator1, .running-state .indicator2, .running-state .indicator3, .running-state .indicator4 {
912
    background-color: #447821;
913
}
914

    
915
.rebooting-state .indicator1, .rebooting-state .indicator2, .rebooting-state .indicator3, .rebooting-state .indicator4 {
916
    background-color: #d4aa00;
917
}
918

    
919
.terminated-state .indicator1, .terminated-state .indicator2, .terminated-state .indicator3, .terminated-state .indicator4 {
920
    background-color: #666666;
921
}
922

    
923
.starting-state .indicator1, .starting-state .indicator3 {
924
    background-color: #447821;
925
}
926

    
927
.starting-state .indicator2, .starting-state .indicator4 {
928
    background-color: #666666;
929
}
930

    
931
.shutting-state .indicator1, .shutting-state .indicator3 {
932
    background-color: #666666;
933
}
934

    
935
.shutting-state .indicator2, .shutting-state .indicator4 {
936
    background-color: #447821;
937
}
938

    
939
.destroying-state .indicator1, .destroying-state .indicator3 {
940
    background-color: #800000;
941
}
942

    
943
.destroying-state .indicator2, .destroying-state .indicator4 {
944
    background-color: #666666;
945
}
946

    
947
.error-state .indicator1, .error-state .indicator2, .error-state .indicator3, .error-state .indicator4 {
948
    background-color: #800000;
949
}
950

    
951
.build-state .indicator1, .build-state .indicator2, .build-state .indicator3, .build-state .indicator4 {
952
    background-color: #87AADE;
953
}
954

    
955
.network-indicator .indicator1, .network-indicator .indicator2, .network-indicator .indicator3, .network-indicator .indicator4 {
956
    background-color: #87AADE;
957
}
958

    
959
.terminated {
960
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
961
    margin-bottom: 17px;
962
    margin-top: 15px;
963
    padding-bottom: 15px;
964
    padding-top: 15px;
965
    width: 699px;
966
}
967

    
968
span.rename {
969
    background-repeat: no-repeat;
970
    color: transparent;
971
    font-size: 75%;
972
    font-weight: normal;
973
    margin-left: 10px;
974
    padding-left: 10px;
975
    text-align: left;
976
    cursor: pointer;
977
}
978

    
979
div.name:hover span.rename {
980
    color: #3D3D3D;
981
    margin-top: 0.4em;
982
    background-image: url(./pencil.png);
983
    background-position: 0 3px;
984
}
985

    
986
.machine div.info {
987
    float:left;
988
    margin-bottom: 5px;
989
}
990

    
991
.machine div.info div.info-header {
992
    background-color: #A1C8DB;
993
    color: white;
994
    height: 17px;
995
    width: 50px;
996
    cursor: pointer;
997
}
998

    
999
div.machine:hover div.info-header, div.machine:hover div.toggler div.down {
1000
    background-color: #84b7d0;
1001
}
1002

    
1003
div.machine div.info-label.darker {
1004
    background-color: #5CA1C0;
1005
}
1006

    
1007
.machine div.info div.info-label {
1008
    font-size: 75%;
1009
    height:16px;
1010
    width: 30px;
1011
    padding: 1px 0 0 5px;
1012
}
1013

    
1014
.machine div.info div.toggler {
1015
    position: relative;
1016
    width:15px;
1017
    height:17px;
1018
    margin-top: -11px;
1019
    margin-left: 37px;
1020
}
1021

    
1022
.machine div.info div.down {
1023
    background: url(/static/down-arrow.png) no-repeat scroll 1px 0;
1024
}
1025

    
1026
.machine div.info div.up {
1027
    background: url(/static/up-arrow.png) no-repeat scroll 1px 0;
1028
}
1029

    
1030
button {
1031
    background-color: #87AADE;
1032
    border: 1px solid #87AADE;
1033
    color: #FFFFFF;
1034
    cursor: pointer;
1035
    height: 23px;
1036
    width: 120px;
1037
}
1038

    
1039
button.next {
1040
    background-color: #4085A5;
1041
    border-color: #4085A5;
1042
    text-align: right;
1043
}
1044

    
1045
button.next:hover {
1046
    background-color: #7DB4CD;
1047
    border-color: #7DB4CD;
1048
}
1049

    
1050
button.prev {
1051
    background-color: #4085A5;
1052
    border-color: #4085A5;
1053
    margin-left: -1px;
1054
    text-align: left;
1055
}
1056

    
1057
button.prev:hover {
1058
    background-color: #7DB4CD;
1059
    border-color: #7DB4CD;
1060
}
1061

    
1062
.image-logo {
1063
    float: left;
1064
    margin-right: 1em;
1065
    margin-left: 1.5em;
1066
    margin-top: 4px;
1067
}
1068

    
1069
div.image {
1070
    clear: both;
1071
    display: block;
1072
    margin-bottom: 3px;
1073
    margin-top: 3px;
1074
    padding: 5px;
1075
}
1076

    
1077
div#view-select {
1078
    float: right;
1079
    clear: both;
1080
    color: white;
1081
    position: relative;
1082
    right: 5px;
1083
    top: -35px;
1084
    display: none;
1085
    z-index: 1000;
1086
}
1087

    
1088
a#standard, a#list, a#single {
1089
    text-decoration: none;
1090
    height: 15px;
1091
    width: 17px;
1092
    padding: 1px 8px 2px 9px;
1093
}
1094

    
1095
div#view-select a {
1096
    color:#5f8dd3;
1097
}
1098

    
1099
a#list:hover {
1100
    background: #5f8dd3;
1101
}
1102

    
1103
a#standard:active, a#list:active {
1104
    color:white;
1105
}
1106

    
1107
a#standard {
1108
    background: url(./icon-view.png) no-repeat -36px 0;
1109
}
1110

    
1111
a#list {
1112
    background: url(./list-view.png) no-repeat -36px 0;
1113
}
1114

    
1115
a#single {
1116
    background: url(./single-view.png) no-repeat -36px 0;
1117
}
1118

    
1119
a#standard:hover {
1120
    background: url(./icon-view.png) no-repeat -18px 0;
1121
}
1122

    
1123
a#list:hover {
1124
    background: url(./list-view.png) no-repeat -18px 0;
1125
}
1126

    
1127
a#single:hover {
1128
    background: url(./single-view.png) no-repeat -18px 0;
1129
}
1130

    
1131
a#standard.activelink {
1132
    background: url(./icon-view.png) no-repeat 0px 0;
1133
}
1134

    
1135
a#list.activelink {
1136
    background: url(./list-view.png) no-repeat 0px 0;
1137
}
1138

    
1139
a#single.activelink {
1140
    background: url(./single-view.png) no-repeat 0px 0;
1141
}
1142

    
1143
#machinetype {
1144
    background-color: #CDE2EC;
1145
    height: 25px;
1146
    margin-bottom: 0px !important;
1147
}
1148

    
1149
div.machine-type {
1150
    float: left;
1151
    margin: 4px 18px 20px;
1152
}
1153

    
1154
.machine-type .active {
1155
    color: #FFFFFF
1156
}
1157

    
1158
#machinesview {
1159
    min-height: 270px;
1160
    margin-top: 40px;
1161
}
1162

    
1163
.list#machinesview {
1164
    margin-left: -20px;
1165
    display:none;
1166
}
1167

    
1168
#machinesview-list.list {
1169
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
1170
    margin-top: -76px;
1171
    padding-left: 15px;
1172
    padding-top: 76px;
1173
    min-height: 270px;
1174
}
1175

    
1176
#machinesview_content {
1177
    display:none;
1178
}
1179

    
1180
.list-machines {
1181
    min-width: 515px;
1182
}
1183

    
1184
#emptymachineslist {
1185
    background-color: #6BA9C6;
1186
    color: #A0A0A0;
1187
    display: none;
1188
    margin-top: -45px;
1189
    padding: 65px 150px 35px;
1190
    text-align: justify;
1191
}
1192

    
1193
#welcomeheader {
1194
    color:white;
1195
    text-align: center;
1196
}
1197

    
1198
.welcomebody {
1199
    color: white;
1200
    font-size:80%;
1201
}
1202

    
1203
.welcomebody a {
1204
    color: white;
1205
}
1206

    
1207
.welcomefooter {
1208
    color: white;
1209
    font-size:60%;
1210
}
1211

    
1212
.welcomefooter a {
1213
    color: white;
1214
}
1215

    
1216
.emptycreatecontainer {
1217
    margin-left: 430px !important;
1218
    position: absolute;
1219
    margin-top: 5px !important;
1220
    width: 180px;
1221
    background-color: #CCCCCC;
1222
    padding: 5px;
1223
    padding-left: 10px;
1224
}
1225

    
1226
.emptycreate {
1227
    margin: 20px 10px 5px 0 !important;
1228
}
1229

    
1230
#createbody {
1231
    display:none;
1232
    font-size: 80%;
1233
}
1234

    
1235
div.list label img {
1236
    margin: 5px 5px -3px 0;
1237
}
1238

    
1239
div.list label {
1240
    color: #3D3D3D;
1241
    font-size: 75%;
1242
}
1243

    
1244
div.list .state {
1245
    margin-top: 7px;
1246
    margin-right: 10px;
1247
}
1248

    
1249
div.list table tbody {
1250
    margin-top: 8px;
1251
}
1252

    
1253
div.list .stopped {
1254
    margin-top: 8px;
1255
}
1256

    
1257
/* root element for tabs  */
1258
#wizard ul.tabs {
1259
    margin-right: -1px;
1260
    float: right;
1261
}
1262

    
1263
#wizard div.panes {
1264
    height: 247px;
1265
    clear:both;
1266
    margin-top: 3px;
1267
}
1268

    
1269
.typebody {
1270
    font-size: 80%;
1271
    font-weight: normal;
1272
    position: relative;
1273
    top: -3px;
1274
}
1275

    
1276
.typehover {
1277
    color: #FFFFFF;
1278
}
1279

    
1280
#label-name {
1281
    margin-top: 10px;
1282
}
1283

    
1284
/* single tab */
1285
#wizard ul.tabs li {
1286
    margin-bottom: 0;
1287
    list-style-type:none;
1288
    float: left;
1289
}
1290

    
1291
/* link inside the tab. uses a background image */
1292
#wizard ul.tabs a {
1293
    display:block;
1294
    padding: 0.2em 0.5em 0.1em 0.4em;
1295
    text-decoration:none;
1296
    color: #FFFFFF;
1297
    position:relative;
1298
    top:1px;
1299
    outline:0;
1300
    background-color: transparent;
1301
    text-align: center;
1302
    width: 100px;
1303
    white-space: nowrap;
1304
    height: 17px;
1305
}
1306

    
1307
#wizard ul.tabs a:hover {
1308
    color: #FFFFFF;
1309
    background-color:#4085A5;
1310
}
1311

    
1312
/* selected tab */
1313
#wizard ul.tabs a.current {
1314
    color: white;
1315
    background-color: #7DB4CD;
1316
    cursor: default;
1317
}
1318

    
1319
#wizard #standard-images {
1320
    background-color: #ECF4F8;
1321
}
1322

    
1323
div.list div.actions {
1324
    display: none;
1325
    clear: left;
1326
    float: right;
1327
    margin-right: 15px;
1328
    margin-top: 37px;
1329
    text-align: right;
1330
    width: 120px;
1331
}
1332

    
1333
div.list div.actions a {
1334
    clear: left;
1335
    color: #A1A1A1;
1336
    display: block;
1337
    font-size:75%;
1338
    margin-bottom: 2px;
1339
}
1340

    
1341
div.list div.actions a:hover {
1342
    background-color: transparent;
1343
}
1344

    
1345
div.list div.actions a.enabled {
1346
    color: #3D3D3D;
1347
}
1348

    
1349
div.list div.actions a.enabled:hover{
1350
    cursor: pointer;
1351
    color: black;
1352
    text-decoration: underline;
1353
}
1354

    
1355
div.list div.actions a.selected {
1356
    color: #FF7F2A !important;
1357
}
1358

    
1359
input.machine {
1360
    width: 13px;
1361
    height: 13px;
1362
    top: -1px;
1363
    overflow: hidden;
1364
}
1365

    
1366
.description-container {
1367
    display: inline-block;
1368
    position: relative;
1369
    width: 300px;
1370
}
1371

    
1372
#wizard .button-container {
1373
    height: 20px;
1374
}
1375

    
1376
/* metadata editing and add machines to network overlays */
1377
#metadata-wizard, #add-machines-wizard {
1378
    position:absolute !important;
1379
    overflow:hidden;
1380
    width:450px;
1381
    display:none;
1382
    background-color:#fff;
1383
    text-align:left;
1384
    font-size: 80%;
1385
    border-bottom: 5px solid #4085A5;
1386
}
1387

    
1388
#metadata-wizard .close, #add-machines-wizard .close  {
1389
    background-image: url("./close-popup.png");
1390
    cursor: pointer;
1391
    height: 13px;
1392
    position: absolute;
1393
    right: 7px;
1394
    top: 9px;
1395
    width: 13px;
1396
}
1397

    
1398
#metadata-wizard .popup-header, #add-machines-wizard .popup-header {
1399
    background-color: #4085A5;
1400
    color: white;
1401
    font-size: 95%;
1402
    font-weight: normal;
1403
    height: 20px;
1404
    margin-left: -16px;
1405
    margin-top: -16px;
1406
    padding-bottom: 2px;
1407
    padding-left: 30px;
1408
    padding-top: 10px;
1409
    width: 482px;
1410
}
1411

    
1412
#metadata-wizard .popup-title, #metadata-wizard .machine-name, #add-machines-wizard .popup-title, #add-machines-wizard .network-name {
1413
    font-size: 120%;
1414
    padding-bottom: 7px;
1415
    padding-top: 10px;
1416
    float:left;
1417
}
1418

    
1419
#metadata-wizard .popup-title {
1420
    padding-bottom: 0px;
1421
    font-size: 120%;
1422
}
1423

    
1424
#metadata-wizard .name-container {
1425
    display: inline-block;
1426
}
1427

    
1428
#add-machines-wizard .network-name {
1429
    padding-left: 5px;
1430
}
1431

    
1432
#metadata-wizard .popup-body, #add-machines-wizard .popup-body {
1433
    background-image: url("./meta-wiz-bg.png");
1434
    margin-left: -16px;
1435
    margin-right: -16px;
1436
    margin-top: 1px;
1437
    height: 250px;
1438
    overflow-y: auto;
1439
    overflow-x: hidden;
1440
}
1441

    
1442
#metadata-wizard .popup-body-inner, #add-machines-wizard .popup-body-inner {
1443
    background-image: url("./meta-wiz-inner-bg.png");
1444
    font-size: 80%;
1445
    height: 180px;
1446
    margin-left: 25px;
1447
    margin-top: 10px;
1448
    padding-left: 15px;
1449
    width: 420px;
1450
}
1451

    
1452
#metadata-wizard .popup-separator, #add-machines-wizard .popup-separator {
1453
    background-color: #74AEC9;
1454
    height: 1px;
1455
    width: 402px;
1456
    margin-bottom: 30px;
1457
    clear: left;
1458
    font-size: 1px;
1459
}
1460

    
1461
#metadata-wizard .metadata-pair-template {
1462
    height: 15px;
1463
    padding-top: 2px;
1464
    width: 350px;
1465
}
1466

    
1467
#metadata-wizard div.metadata-pair-template:hover {
1468
    background-color: #74AEC9;
1469
}
1470

    
1471
#metadata-wizard .metadata-container, #add-machines-wizard .machines-container {
1472
    background-color: transparent;
1473
    float: left;
1474
    width: 400px;
1475
    font-size: 120%;
1476
}
1477

    
1478
#metadata-wizard .machine-icon {
1479
    float: left;
1480
    padding-left: 10px;
1481
    padding-right: 3px;
1482
    padding-top: 7px;
1483
}
1484

    
1485
#metadata-wizard .large-spinner, #add-machines-wizard .large-spinner {
1486
    display: block;
1487
    margin: 50px 0 0 185px;
1488
}
1489

    
1490
#metadata-wizard .metadata-key {
1491
    float: left;
1492
    width: 110px;
1493
    padding-left: 5px;
1494
}
1495

    
1496
#metadata-wizard .metadata-value {
1497
    width: auto;
1498
}
1499

    
1500
#metadata-wizard .metadata-add-template {
1501
    background-color: #74AEC9;
1502
    width: 350px;
1503
}
1504

    
1505
#metadata-wizard #add-meta-value {
1506
    margin-left: 25px;
1507
    width: 150px;
1508
}
1509

    
1510
#metadata-wizard button, #add-machines-wizard button {
1511
    font-size: 80%;
1512
    width: 87px;
1513
    float: right;
1514
    background-color: #5599FF;
1515
    border: 0px solid #5599FF;
1516
    padding: 0;
1517
    text-align: center;
1518
    margin-right: 8px;
1519
}
1520

    
1521
#metadata-wizard .buttons, #add-machines-wizard .buttons {
1522
    border-top: 2px solid #4085A5;
1523
    height: 30px;
1524
    margin-left: 25px;
1525
    margin-right: 40px;
1526
    width: 400px;
1527
    font-size: 120%;
1528
}
1529

    
1530
#metadata-wizard button.save, #add-machines-wizard button.cancel {
1531
    float: left;
1532
    height: 23px;
1533
    margin: 10px 0 0 0;
1534
    width: 87px;
1535
    background-color: #4085A5;
1536
    border-color: #4085A5;
1537
}
1538

    
1539
#metadata-wizard button.save:hover, #add-machines-wizard button.cancel:hover {
1540
    background-color: #7DB4CD;
1541
    border-color: #7DB4CD;
1542
}
1543

    
1544
#metadata-wizard button.create, #add-machines-wizard button.add {
1545
    height: 23px;
1546
    margin: 10px 0 0 0;
1547
    background-color: #FF6600;
1548
    border-color: #FF6600;
1549
}
1550

    
1551
#metadata-wizard button.create:hover, #add-machines-wizard button.add:hover {
1552
    background-color: #FF9651;
1553
    border-color: #FF9651;
1554
}
1555

    
1556
#metadata-wizard .editbuttons {
1557
    margin-top: 4px;
1558
    margin-right: 0;
1559
}
1560

    
1561
#metadata-wizard .vertical-separator {
1562
    height: 17px;
1563
    width: 1px;
1564
    background-color: #74AEC9;
1565
    float:left;
1566
    margin-right: 10px;
1567
}
1568

    
1569
#metadata-wizard h3, #add-machines-wizard h3 {
1570
    font-weight:normal;
1571
}
1572

    
1573
#metadata-wizard .metadata-edit {
1574
    clear: none;
1575
    cursor: pointer;
1576
    float: right;
1577
    margin-right: 0;
1578
    width: 40px;
1579
    margin-top: -14px;
1580
    display:none;
1581
}
1582

    
1583
#metadata-wizard .metadata-edit .edit, #metadata-wizard .metadata-edit .remove {
1584
    background-repeat: no-repeat;
1585
    color: transparent;
1586
    font-size: 75%;
1587
    float: left;
1588
    width: 16px;
1589
    height: 16px;
1590
}
1591

    
1592
#metadata-wizard .addbuttons {
1593
    display: block;
1594
    clear: none;
1595
    width: 40px;
1596
    margin-right: -1px !important;
1597
    margin-top: 2px;
1598
    float:right;
1599
    cursor: pointer;
1600
}
1601

    
1602
.metadata-pair-template .editbuttons {
1603
    margin-top: -19px !important;
1604
    margin-right: -2px !important;
1605
}
1606

    
1607
#metadata-wizard .metadata-edit .edit {
1608
    background-image: url("./meta-edit.png");
1609
    margin-left: 2px;
1610
}
1611

    
1612
#metadata-wizard .metadata-edit .remove, #metadata-wizard .editbuttons .remove {
1613
    background-image: url("./meta-remove.png");
1614
    margin-left: 4px;
1615
    background-repeat: no-repeat;
1616
    color: transparent;
1617
    font-size: 75%;
1618
    height: 16px;
1619
    width: 16px;
1620
    float: left;
1621
}
1622

    
1623
#metadata-wizard .editbuttons .save {
1624
    background-image: url("./meta-save.png");
1625
    padding-top:0;
1626
}
1627

    
1628
#metadata-wizard .addbuttons .cancel {
1629
    background-image: url("./meta-remove.png");
1630
    margin-left: 3px;
1631
}
1632

    
1633
#metadata-wizard .addbuttons .save {
1634
    background-image: url("./meta-save.png");
1635
    margin-left: 1px;
1636
}
1637

    
1638
#metadata-wizard .metadata-edit .edit, #metadata-wizard .metadata-edit .remove, #metadata-wizard .editbuttons .remove, #metadata-wizard .editbuttons .save, #metadata-wizard .addbuttons .cancel, #metadata-wizard .addbuttons .save {
1639
    background-color: #4287a7;
1640
}
1641

    
1642
#metadata-wizard div.metadata-edit div.edit:hover, #metadata-wizard div.metadata-edit div.remove:hover, #metadata-wizard div.editbuttons div.remove:hover, #metadata-wizard div.editbuttons div.save:hover, #metadata-wizard div.addbuttons div.cancel:hover, #metadata-wizard div.addbuttons div.save:hover {
1643
    background-color: #74AEC9;
1644
}
1645

    
1646
#metadata-wizard .addbuttons .cancel, #metadata-wizard .addbuttons .save {
1647
    width: 16px;
1648
    height: 16px;
1649
    float: left;
1650
    background-repeat: no-repeat;
1651
    color: transparent;
1652
}
1653

    
1654
#metadata-wizard .metatextbox {
1655
    font-size: 90%;
1656
    height: 18px;
1657
    margin-top: -2px;
1658
    color: black;
1659
    width: 150px;
1660
}
1661

    
1662
#metadata-wizard p, #add-machines-wizard p {
1663
    margin-left: 7px;
1664
    width: 200px;
1665
}
1666

    
1667
#metadata-wizard div.bottomruler, #add-machines-wizard div.bottomruler {
1668
    background-color: #666;
1669
    height: 20px;
1670
    margin-top: 17px;
1671
}
1672

    
1673
#metadata-wizard button.remove {
1674
    height: 15px;
1675
    width: 70px;
1676
    background-color: #d35f5f;
1677
    border-color: #d35f5f;
1678
}
1679

    
1680
#metadata-wizard button.edit {
1681
    height: 15px;
1682
    width: 70px;
1683
    background-color: #666;
1684
    border-color: #666;
1685
    margin-top: -12px;
1686
}
1687

    
1688
#metadata-wizard input {
1689
    font-style: italic;
1690
    color: #ccc;
1691
}
1692

    
1693
#metadata-wizard textarea.edit-meta-value {
1694
    font-style: normal;
1695
    text-align: left;
1696
    color: black;
1697
    margin-top: 2px;
1698
    width:200px;
1699
    height: 49px;
1700
}
1701

    
1702
#metadata-wizard input {
1703
    font-size: 80%;
1704
}
1705

    
1706
#metadata-wizard input.key {
1707
    height: 15px;
1708
    left: 460px;
1709
    position: absolute;
1710
    top: 83px;
1711
    width: 230px;
1712
}
1713

    
1714
#metadata-wizard textarea.value {
1715
    width: 267px;
1716
    height: 170px;
1717
    overflow: auto;
1718
}
1719

    
1720
#metadata-wizard .input-enabled {
1721
    color: black;
1722
    text-align: left;
1723
    font-style: normal;
1724
}
1725

    
1726
#metadata-wizard label.meta-value {
1727
    vertical-align: top;
1728
}
1729

    
1730
#metadata-wizard button.cancel, #metadata-wizard #edit-dialog button.close {
1731
    float: left;
1732
    margin: 4px 0 0 25px;
1733
    background-color: #d35f5f;
1734
    border-color: #d35f5f;
1735
}
1736

    
1737
/* metadata dropdown combo */
1738
.meta-key {
1739
    margin-right: 18px;
1740
    float:left;
1741
}
1742
#metadata-wizard .textdropdown-outer {
1743
    float: left;
1744
}
1745

    
1746
#metadata-wizard .textdropdown-btn {
1747
    background: url("./dropdown-arrow.gif") no-repeat scroll center center transparent;
1748
    cursor: pointer;
1749
    float: right;
1750
    left: 130px;
1751
    margin-top: 4px;
1752
    position: absolute;
1753
    width: 20px;
1754
}
1755

    
1756
#metadata-wizard ul {
1757
    border: 1px solid #ccc;
1758
    padding: 0px;
1759
    list-style: none;
1760
    margin: 0px;
1761
    background-color: white;
1762
    height: auto !important;
1763
    padding-left: 5px;
1764
    width: 103px !important;
1765
}
1766

    
1767
#metadata-wizard ul li {
1768
    clear: both;
1769
    display: block;
1770
    float: right;
1771
    list-style: none outside none;
1772
    margin-bottom: 0 !important;
1773
    margin-left: 0 !important;
1774
    padding-bottom: 2px;
1775
    padding-right: 2px;
1776
    padding-top: 2px;
1777
    width: 100%;
1778
}
1779

    
1780
#metadata-wizard ul li:hover {
1781
    background-color: #efefef;
1782
    cursor: pointer;
1783
}
1784

    
1785
#metadata-wizard .dropdownitem {
1786
    margin-left: 10px;
1787
}
1788

    
1789
#metadata-wizard #txtdropdown:focus {
1790
    outline: 0 none;
1791
}
1792

    
1793
#metadata-wizard #add-meta-key {
1794
    height: 16px;
1795
    margin-left: 5px;
1796
    margin-top: 2px;
1797
    width: 105px !important;
1798
}
1799

    
1800
/* notification box */
1801
#yes-no {
1802
    height: 150px;
1803
    z-index: 9999;
1804
    border-bottom: 5px solid #4085A5;
1805
}
1806

    
1807
#yes-no p, #yes-no button {
1808
    margin-top: 15px;
1809
}
1810

    
1811
#error-success {
1812
    z-index: 9999;
1813
    border-bottom: 5px solid #4085A5;
1814
    min-height: 150px;
1815
    top: 120px !important;
1816
    position: absolute !important;
1817
}
1818

    
1819
#error-success p {
1820
    margin-top: 5px;
1821
}
1822

    
1823
#error-success strong {
1824
    color: #F49C1A;
1825
}
1826

    
1827
#error-success .close {
1828
    background-image: url("./close-popup.png");
1829
    cursor: pointer;
1830
    height: 13px;
1831
    position: absolute;
1832
    right: 7px;
1833
    top: 9px;
1834
    width: 13px;
1835
}
1836

    
1837
.popup-header-error {
1838
    background-color: #800000 !important;
1839
}
1840

    
1841
.popup-border-error {
1842
    border-color: #800000 !important;
1843
}
1844

    
1845
.popup-details-error {
1846
    border: none !important;
1847
}
1848

    
1849
.popup-separator-error {
1850
    margin-bottom: 5px !important;
1851
}
1852

    
1853
#error-success .popup-header {
1854
    background-color: #4085A5;
1855
    color: white;
1856
    font-size: 95%;
1857
    font-weight: normal;
1858
    height: 20px;
1859
    margin-left: -16px;
1860
    margin-top: -16px;
1861
    padding-bottom: 2px;
1862
    padding-left: 30px;
1863
    padding-top: 10px;
1864
    width: 482px;
1865
}
1866

    
1867

    
1868
#error-success.success h3 span.header-box{
1869
    background-color: #71c837;
1870
    display: block;
1871
    background-image: url("./save-green.png");
1872
    background-position: right 0;
1873
    background-repeat: no-repeat;
1874
    width: 80px;
1875
    padding: 3px 3px 3px 8px;
1876
    margin-top: -6px;
1877
    font-size: 90% !important;
1878
    margin-left: -11px;
1879
}
1880

    
1881
#error-success .popup-body {
1882
    background-image: url("./popup-bg.png");
1883
    margin-left: -16px;
1884
    margin-right: -16px;
1885
    margin-top: 1px;
1886
    min-height: 142px;
1887
    padding-top: 10px;
1888
}
1889

    
1890
#error-success .popup-body-inner {
1891
    background: url("./popup-inner-bg.png") repeat-x scroll 0 0 transparent;
1892
    font-size: 80%;
1893
    min-height: 120px;
1894
    margin-left: 20px;
1895
    padding-left: 15px;
1896
    width: 460px;
1897
}
1898

    
1899
#error-success .popup-separator {
1900
    background-color: #74AEC9;
1901
    height: 1px;
1902
    width: 442px;
1903
    margin-bottom: 30px;
1904
}
1905

    
1906
#error-success .machine-now-building {
1907
    font-size: 95%;
1908
    padding-bottom: 7px;
1909
    padding-top: 10px;
1910
}
1911

    
1912
#error-success.success .machine-now-building {
1913
    padding-bottom: 14px !important;
1914
}
1915

    
1916
#error-success .password-container {
1917
    width: 430px;
1918
    padding: 5px;
1919
    border: 2px solid #75b54a;
1920
    background-color: #aade87;
1921
}
1922

    
1923
#error-success .password-header {
1924
    margin-bottom: 5px;
1925
}
1926

    
1927
#error-success .password {
1928
    color: #447821;
1929
}
1930

    
1931
#error-success .popup-details {
1932
    border: 2px solid #FF7F2A;
1933
    float: left;
1934
    margin-left: 10px;
1935
    padding: 2px;
1936
}
1937

    
1938
#error-success.success .popup-details {
1939
    border: none !important;
1940
    float: none !important;
1941
    margin-left: none !important;
1942
    margin-top: 10px;
1943
}
1944

    
1945
#error-success.success .popup-separator {
1946
    margin-bottom: 14px !important;
1947
}
1948

    
1949

    
1950
#error-success .write-password {
1951
    margin-bottom: 5px;
1952
    padding-left: 30px;
1953
}
1954

    
1955
#error-success .write-password-password {
1956
    padding-left: 30px;
1957
    color: #447821;
1958
    display: inline;
1959
    font-size: 110%;
1960
    font-weight: bold;
1961
}
1962

    
1963
#error-success .write-password-details {
1964
    font-size: 75%;
1965
}
1966

    
1967
.more-details {
1968
    display: block;
1969
}
1970

    
1971
.popup-details a:link, .popup-details a:visited{
1972
    color: black;
1973
}
1974

    
1975
/* Confirmation boxes */
1976
div.confirm_single, div.confirm_multiple, div.action_error {
1977
    display: none;
1978
    color: black;
1979
}
1980

    
1981
div.action-container.destroy div.confirm_single {
1982
    bottom: 0;
1983
    position: absolute;
1984
    left: 83px;
1985
}
1986

    
1987
div.terminated div.action-container.destroy div.confirm_single {
1988
    margin-top: 30px;
1989
}
1990

    
1991
div.confirm_single button, div.confirm_multiple button, div.action_error button {
1992
    font-size: 100%;
1993
    cursor: pointer;
1994
    color: black;
1995
    height: 20px !important;
1996
}
1997

    
1998
div.confirm_single {
1999
    float: right;
2000
    margin: -20px -122px 0 0;
2001
}
2002

    
2003
div.confirm_single button {
2004
    border: none;
2005
}
2006

    
2007
div.confirm_single button.yes {
2008
    width: 90px;
2009
    background-color:#FF7F2A;
2010
}
2011

    
2012
div.confirm_single button.yes:hover {
2013
    background-color: #FF9955;
2014
}
2015

    
2016
div.confirm_single button.no {
2017
    width: 20px;
2018
    margin-left:-5px;
2019
    background-color: #FF9955;
2020
    color:#d95d0a;
2021
}
2022

    
2023
div.confirm_single button.no:hover {
2024
    color: white;
2025
}
2026

    
2027
div.confirm_multiple {
2028
    background-color: #4085A5;
2029
    font-size: 75%;
2030
    z-index: 1;
2031
    position: absolute;
2032
    width: 698px;
2033
    height: 28px;
2034
    margin-top: 15px;
2035
}
2036

    
2037
div.confirm_multiple p {
2038
    float: left;
2039
    color: #FF7F2A;
2040
    font-weight: bold;
2041
    margin: 7px 0 0 200px;
2042
}
2043

    
2044
#networks-pane div.confirm_multiple p {
2045
    margin: 7px 0 0 100px;
2046
}
2047

    
2048
div.confirm_multiple button {
2049
    float: right;
2050
    background-color: transparent;
2051
    border: 1px solid #5CA1C0;
2052
    margin: 4px 5px 0 0;
2053
}
2054

    
2055
div.confirm_multiple button.yes {
2056
    border-color: #FF7F2A;
2057
    padding: 0 12px;
2058
}
2059

    
2060
div.confirm_multiple button.yes:hover {
2061
    background-color: #FF7F2A;
2062
}
2063

    
2064
div.confirm_multiple button.no {
2065
    padding: 0px 16px;
2066
}
2067

    
2068
div.confirm_multiple button.no:hover {
2069
    background-color: #5CA1C0;
2070
}
2071

    
2072
div.action_error {
2073
    width: 80px;
2074
    height: 60px;
2075
    padding: 5px;
2076
    margin: -2px 0 0 595px;
2077
    background-color: #4085A5;
2078
    font-size: 75%;
2079
    line-height: 1.5;
2080
    z-index:1;
2081
    color: #FF7F2A;
2082
    position:absolute;
2083
    top: 0px;
2084
}
2085

    
2086
.action_error button {
2087
    width: 80px !important;
2088
    background-color: transparent;
2089
    border: 1px solid;
2090
    padding: 0px;
2091
    border-color: #FF7F2A;
2092
}
2093

    
2094
div.action_error button.details {
2095
    margin: 5px 0 0 0px;
2096
    padding: 0 15px;
2097
}
2098

    
2099
div.action_error button.details:hover {
2100
    background-color: #FF7F2A;
2101
}
2102

    
2103
div#aboutuser{
2104
    float:right;
2105
    clear: both;
2106
    color: #FFFFFF;
2107
    font-size: 75%;
2108
    margin-top: -25px;
2109
}
2110

    
2111
div#user{
2112
    float:right;
2113
    clear: both;
2114
    color: #FFFFFF;
2115
    font-size: 75%;
2116
    margin-top: 43px;
2117
}
2118

    
2119
div#user a{
2120
    color: #FFFFFF;
2121
    text-decoration: none;
2122
}
2123

    
2124
div#user a.current_lang {
2125
    color: #72ADC8;
2126
}
2127

    
2128
.separator {
2129
    background-color: #74AEC9;
2130
    height: 10px;
2131
    width: 700px;
2132
    font-size: 1px;
2133
    line-height: 0px;
2134
}
2135

    
2136
#disks.separator {
2137
    background-color: #dea842;
2138
}
2139

    
2140
#networks.separator {
2141
    background-color: #6c535d;
2142
}
2143

    
2144
#networks-pane .public-networks .namecontainer {
2145
    margin-top: 4px !important;
2146
}
2147

    
2148
.network-machine h5 {
2149
    margin-bottom: 15px;
2150
    margin-top: 5px;
2151
}
2152

    
2153
.machine-container .separator {
2154
    width: 508px;
2155
    height: 1px;
2156
    margin-top: 2px;
2157
    background-color: #5CA1C0;
2158
    margin-left: 13px;
2159
    font-size: 1px;
2160
    font-weight: normal;
2161
}
2162

    
2163
.machine h5 {
2164
    margin: -1px 0px 4px 0px;
2165
}
2166

    
2167
.machine h5.namecontainer {
2168
    margin-top: 5px;
2169
}
2170

    
2171
.editbuttons {
2172
    display: block;
2173
    clear: none;
2174
    width: 40px;
2175
    margin-right: 32%;
2176
    padding-top: 2px;
2177
    float: right;
2178
    cursor: pointer;
2179
    position: relative;
2180
    z-index: 1000;
2181
}
2182

    
2183
div.editbuttons div.save:hover, div.editbuttons div.cancel:hover {
2184
    background-color: #84b7d0;
2185
}
2186

    
2187
div.editbuttons div.cancel:hover {
2188
    background-image: url("./cancel-onhover.png");
2189
}
2190

    
2191
.editbuttons .cancel, .editbuttons .save {
2192
    background-repeat: no-repeat;
2193
    color: transparent;
2194
    height: 16px;
2195
    width: 16px;
2196
    float: left;
2197
}
2198

    
2199
.editbuttons .cancel {
2200
    background-image: url("./cancel.png");
2201
    margin-left: 3px;
2202
}
2203

    
2204
.editbuttons .save {
2205
    background-image: url("./save.png");
2206
    margin-left: 1px;
2207
}
2208

    
2209
.editbuttons img {
2210
    float:none !important;
2211
    margin: 0px !important;
2212
}
2213

    
2214
.namecontainer {
2215
    height: 18px;
2216
    margin-top: 9px;
2217
}
2218

    
2219
.nametextbox {
2220
    font-size: 95%;
2221
}
2222

    
2223
.large-spinner {
2224
    background: url("./icons/indicators/large/progress.gif");
2225
    margin-left: 298px;
2226
    margin-top: 20px;
2227
    height: 31px;
2228
    width: 31px;
2229
    position: absolute;
2230
}
2231

    
2232
.list .large-spinner {
2233
    margin-top:-50px;
2234
}
2235

    
2236
.single .large-spinner {
2237
    margin-top:-45px;
2238
}
2239

    
2240
/* tables in list view */
2241
div.list div.dataTables_filter {
2242
    font-size: 75%;
2243
    display: none;
2244
    margin-bottom: 12px;
2245
}
2246

    
2247
div.list div.dataTables_filter input{
2248
    font-size: 100%;
2249
}
2250

    
2251
.dataTables_wrapper {
2252
    width: 515px;
2253
    padding-bottom: 40px;
2254
}
2255

    
2256
div.list table thead .sorting, div.list table thead .sorting_desc, div.list table thead .sorting_asc {
2257
    padding-right: 15px !important;
2258
}
2259

    
2260
div.list table {
2261
    width: 515px;
2262
    font-size: 75%;
2263
}
2264

    
2265
div.list table tbody td {
2266
    color: #3D3D3D;
2267
    padding:6px;
2268
    vertical-align: middle;
2269
}
2270

    
2271
div.list table thead tr th {
2272
    background-color: #CDE2EC;
2273
    background-image: url(bg.gif);
2274
    background-repeat: no-repeat;
2275
    background-position: right 11px;
2276
    font-weight: normal;
2277
    border: 1px solid transparent;
2278
    border-bottom: none;
2279
    padding: 4px;
2280
    text-align: left;
2281
    vertical-align: middle;
2282
    cursor: pointer;
2283
}
2284

    
2285
div.list table thead .sorting_asc, div.list table thead .sorting_desc {
2286
    background-color: #5CA1C0;
2287
}
2288

    
2289
div.list table thead .sorting_asc {
2290
    background-image: url(asc.gif);
2291
}
2292

    
2293
div.list table thead .sorting_desc {
2294
    background-image: url(desc.gif);
2295
}
2296

    
2297
div.list table .selection div.expand-icon {
2298
    background-image: url(asc.gif);
2299
    background-repeat: no-repeat;
2300
    position: relative;
2301
    cursor: pointer;
2302
    width: 15px;
2303
    height: 4px;
2304
    left: 19px;
2305
    top: -11px;
2306
}
2307

    
2308
ul.dropdown-selector {
2309
    background-color: #E6EEEE;
2310
    position: absolute;
2311
    margin-left: 1px;
2312
    display: block;
2313
    top: 255px;
2314
    font-size:75%;
2315
    width:40px;
2316
}
2317

    
2318
ul.dropdown-selector li {
2319
    padding: 4px;
2320
}
2321

    
2322
ul.dropdown-selector li:hover {
2323
    background-color: #5CA1C0;
2324
}
2325

    
2326
ul.dropdown-selector li a{
2327
    color: black;
2328
    text-decoration: none;
2329
}
2330

    
2331
div.list table span.imagetag {
2332
    display: none;
2333
}
2334

    
2335
div.list table thead .vmos {
2336
    width: 20px !important;
2337
    vertical-align:middle;
2338
}
2339

    
2340
div.list table .selection {
2341
    width: 20px !important;
2342
    text-align: left;
2343
    background-image: none;
2344
    padding-left: 6px;
2345
}
2346

    
2347
div.list table thead .vmflavor {
2348
    width: 100px !important;
2349
}
2350

    
2351
div.list table thead .vmgroup {
2352
    width: 40px !important;
2353
}
2354

    
2355
div.list table thead .vmstatus {
2356
    width: 50px !important;
2357
}
2358

    
2359
div.list table thead .vmname {
2360
    width: 70px !important;
2361
}
2362

    
2363
.spinner, .wave {
2364
    clear: right;
2365
    float:right !important;
2366
    margin: 1px 16px 0 15px !important;
2367
}
2368

    
2369
#networks-pane .spinner {
2370
    margin-top: 18px !important;
2371
}
2372

    
2373
.hidden {
2374
    display:none;
2375
}
2376

    
2377
div.actions a.selected, div.actions a.selected:hover, div.machine-actions a.selected, div.machine-actions a.selected:hover {
2378
    display:block !important;
2379
}
2380

    
2381
.action_error .message, .action_error .code {
2382
    display: none;
2383
}
2384

    
2385
.fixed {
2386
    bottom: 0;
2387
    position: fixed !important;
2388
}
2389

    
2390
/* Networks */
2391
#networks-pane {
2392
    background-color: transparent;
2393
    color: black;
2394
    margin-left: 1px;
2395
    margin-right: 0;
2396
}
2397

    
2398
#networkscreate {
2399
    color: black;
2400
    background-color: #FF7F2A;
2401
    cursor: pointer;
2402
    padding: 7px 24px;
2403
    text-decoration: none;
2404
}
2405

    
2406
#networkscreate:hover {
2407
    background-color: #FF9955;
2408
}
2409

    
2410
#networks-pane #beforecreate {
2411
    margin-left: -13px;
2412
    margin-top: -6px;
2413
}
2414

    
2415
#networks-container {
2416
    margin-top: 10px;
2417
    min-height: 270px;
2418
}
2419

    
2420
#networks-createcontainer {
2421
    position: absolute;
2422
    top: 155px;
2423
}
2424

    
2425
#networks-pane .public-networks {
2426
    background: url("./running-bg.png") repeat scroll 0 0 transparent;
2427
    margin: 0 0 18px;
2428
    padding: 70px 0 15px 35px;
2429
}
2430

    
2431
#networks-pane .private-networks {
2432
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
2433
    padding: 15px 20px 20px 35px;
2434
}
2435

    
2436
#public-template, #private-template, #public-machine-template, #private-machine-template {
2437
    display:none;
2438
}
2439

    
2440
div.network a.action-network-add {
2441
    display: none;
2442
}
2443

    
2444
div.network a.action-network-destroy {
2445
    margin-top: 38px !important;
2446
    width: 50px;
2447
    display: none;
2448
}
2449

    
2450
div.network {
2451
    clear: both;
2452
    min-height: 65px;
2453
    margin: 5px 0 0 -30px;
2454
    padding: 3px 20px 0 4px;
2455
    width: 480px;
2456
    position: relative;
2457
}
2458

    
2459
#private-template {
2460
    margin: 2px 0 0 -30px;
2461
}
2462

    
2463
div.network-placeholder {
2464
    border-left: 3px solid #FB822F;
2465
    margin-left: 33px;
2466
}
2467

    
2468
div.network a:hover, span.show-machines:hover, span.ip:hover, span.show-firewall:hover {
2469
    text-decoration: underline;
2470
    cursor: pointer;
2471
}
2472

    
2473
#networks-container .name {
2474
    font-size: 75%;
2475
    margin-bottom: 25px;
2476
    margin-top: -4px;
2477
}
2478

    
2479
h5.network-machines, h5.machine-settings {
2480
    font-size: 75%;
2481
}
2482

    
2483
.state {
2484
    float: right;
2485
    position: absolute;
2486
    right: 10px;
2487
    top: 40px;
2488
    font-size: 75%;
2489
}
2490

    
2491
div.network div.actions {
2492
    float: right;
2493
    width: 100px;
2494
    font-size: 75%;
2495
    margin:0px -120px 0 0;
2496
    font-weight: normal;
2497
}
2498

    
2499
div.network div.machine-actions {
2500
    text-decoration: none;
2501
    float: right;
2502
    width: 100px;
2503
    margin: -5px -100px 0 0;
2504
    font-weight: normal;
2505
    font-size: 75%;
2506
}
2507

    
2508
div.network div.actions a, div.network div.machine-actions a {
2509
    text-decoration: none;
2510
    height: 15px;
2511
    color: transparent;
2512
    display: block;
2513
}
2514

    
2515
div.network div.actions a {
2516
    margin: -2px 0 0 8px;
2517
}
2518

    
2519
div.network div.machine-actions a {
2520
    margin: 0 0 0 8px;
2521
}
2522

    
2523
div.network div.actions a:hover, div.network div.machine-actions a:hover {
2524
    display: block;
2525
    background-color:#A1C8DB;
2526
    width: 200px;
2527
    opacity: 0.8;
2528
    filter: alpha(opacity = 80);
2529
}
2530

    
2531
div.network:hover div.actions a, div.network-machine:hover div.machine-actions a {
2532
    color: black;
2533
}
2534

    
2535
div.network div.actions a.selected, div.network div.machine-actions a.selected {
2536
    color: #FF7F2A !important;
2537
    width: 50px !important;
2538
}
2539

    
2540
div.network div.actions a.selected:hover, div.network div.machine-actions a.selected:hover {
2541
    background-color: transparent;
2542
}
2543

    
2544
div.network div.display a {
2545
    color: black;
2546
    display: block;
2547
}
2548

    
2549
div.network-machine div.machine-actions a.action-details {
2550
    margin-top: 10px;
2551
}
2552

    
2553
div.network:hover {
2554
    background-color: #CDE2EC;
2555
}
2556

    
2557
#internet-separator {
2558
    width: 510px;
2559
    height: 5px;
2560
    background-color: #6C535D;
2561
    margin-left: -36px;
2562
    margin-top: 20px;
2563
}
2564

    
2565
.network-logos {
2566
    float:left;
2567
    padding-right: 10px;
2568
}
2569

    
2570
.network-logos:hover {
2571
    cursor: pointer;
2572
}
2573

    
2574
#networks-container .settings {
2575
    color: #000000;
2576
}
2577

    
2578
#networks-container .network-type {
2579
    float: right;
2580
    margin-top: -4px;
2581
    margin-right: 15px;
2582
}
2583

    
2584
#networks-container .indicator {
2585
    background-color: #87AADE;
2586
    border-color: white;
2587
    border-style: solid;
2588
    border-width: 2px 3px 2px 2px;
2589
}
2590

    
2591
.state div {
2592
    text-align: right;
2593
    margin: 5px 1px 4px;
2594
}
2595

    
2596
.public-networks .state div {
2597
    margin-top: 4px;
2598
}
2599

    
2600
.private-networks .state div {
2601
    margin-top: 9px;
2602
    margin-bottom: -12px;
2603
}
2604

    
2605
div.indicator {
2606
    clear: none;
2607
    float: right;
2608
    height: 11px;
2609
    margin: 3px -1px;
2610
    width: 10px;
2611
}
2612

    
2613
#private-networks {
2614
    margin-top: 20px;
2615
}
2616

    
2617
.private-networks .editbuttons {
2618
    margin-right: 22%;
2619
}
2620

    
2621
.private-networks div.confirm_single {
2622
    margin: 46px -231px 0 0;
2623
    font-size: 80%;
2624
}
2625

    
2626
.private-networks .network-machine div.confirm_single {
2627
    margin: -8px -210px 0 0;
2628
}
2629

    
2630
span.rename-network, span.configure {
2631
    background-repeat: no-repeat;
2632
    color: transparent;
2633
    font-size: 75%;
2634
    font-weight: normal;
2635
    margin-left: 10px;
2636
    padding-left: 10px;
2637
    text-align: left;
2638
}
2639

    
2640
span.rename-network {
2641
    cursor: pointer;
2642
}
2643

    
2644
div.name-div:hover span.rename-network {
2645
    color: #3D3D3D;
2646
    margin-top: 0.4em;
2647
    background-image: url(./pencil.png);
2648
    background-position: 0 3px;
2649
}
2650

    
2651
div.network:hover a.rename {
2652
    color: #3d3d3d;
2653
}
2654

    
2655
.network-separator {
2656
    background-color: #DCDCDC;
2657
    height: 1px;
2658
    margin: 2px 0 0 -5px;
2659
    width: 480px;
2660
    font-size: 4px;
2661
    line-height: 1px;
2662
}
2663

    
2664
.network-contents {
2665
    margin-left: -4px;
2666
    width: 504px;
2667
    clear: both;
2668
    padding-bottom: 7px;
2669
}
2670

    
2671
.network-machine .state div {
2672
    text-align: left;
2673
}
2674

    
2675
.network-machine {
2676
    margin-left: 34px;
2677
    padding-bottom: 5px;
2678
    padding-left: 5px;
2679
    padding-top: 10px;
2680
    margin-top: 5px;
2681
}
2682

    
2683
.network-machine .logo {
2684
    float:left;
2685
    padding-right: 10px;
2686
    position:relative;
2687
}
2688

    
2689
#networks-container .machine-name {
2690
    text-decoration: none !important;
2691
    margin-bottom: 10px;
2692
    color: #000000;
2693
    margin-top: -4px;
2694
}
2695

    
2696
.discreet {
2697
    color: #969696;
2698
}
2699

    
2700
.network-contents-start-separator {
2701
    height: 3px;
2702
    background-color: #87AADE;
2703
    margin-left: 39px;
2704
    width: 410px;
2705
    font-size: 3px;
2706
}
2707

    
2708
.network-contents-end-separator {
2709
    height: 3px;
2710
    background-color: #87AADE;
2711
    margin-top: 7px;
2712
    margin-left: 13px;
2713
    width: 473px;
2714
    font-size: 3px;
2715
}
2716

    
2717
.network .separator {
2718
    background-color: #DCDCDC;
2719
    height: 1px;
2720
    margin-left: 5px;
2721
    margin-top: 5px;
2722
    margin-bottom: -3px;
2723
    position: absolute;
2724
    width: 473px;
2725
}
2726

    
2727
.network-machine .state {
2728
    margin-right: 18px;
2729
}
2730

    
2731
.network-machine .state .status {
2732
    margin-bottom: 4px;
2733
}
2734

    
2735
.machine-name .name {
2736
    margin-top: -10px !important;
2737
}
2738

    
2739
.machine-name .namecontainer {
2740
    line-height: 18px;
2741
    margin-bottom: 20px;
2742
}
2743

    
2744
div.network-machine:hover {
2745
    background-color: #5CA1C0;
2746
}
2747

    
2748
.machines {
2749
    width: 416px;
2750
    margin-bottom: -8px;
2751
    margin-top: 10px;
2752
}
2753

    
2754
div.empty-network-slot {
2755
    height: 60px;
2756
}
2757

    
2758
div.network-remove-machine, div.network-add-machine {
2759
    background-color: #FB822F;
2760
    color: #bc4b00;
2761
    width:90px;
2762
    float:left;
2763
    margin:40px 0 0 -100px;
2764
}
2765

    
2766
span.remove-icon {
2767
    font-size: 80%;
2768
    margin-left: 15px;
2769
}
2770

    
2771
span.add-icon {
2772
    margin-left: 15px;
2773
}
2774

    
2775
span.remove-icon:hover, span.add-icon:hover {
2776
    cursor:pointer;
2777
    color: #fff;
2778
}
2779

    
2780
div.network-add-machine {
2781
    margin:39px 0 0 0;
2782
}
2783

    
2784
.firewall-on {
2785
    color: #42E342;
2786
}
2787

    
2788
.firewall-off {
2789
    color: #F82E2E;
2790
}
2791

    
2792
.firewall-content {
2793
    color: black;
2794
    font-size: 60%;
2795
    margin-left: 60px;
2796
}
2797

    
2798
.firewall-content .checkbox-legends {
2799
    vertical-align: text-top;
2800
}
2801

    
2802
.checkbox-legends a {
2803
    color: black;
2804
    text-decoration: underline;
2805
    font-size: 100%;
2806
}
2807

    
2808
h5.machine-connect {
2809
    font-size: 75%;
2810
}
2811

    
2812
.machine-connect span {
2813
    text-decoration: underline;
2814
}
2815

    
2816
h5.machine-connect span:hover {
2817
    cursor: pointer;
2818
}
2819

    
2820
.firewall-contents-start-separator {
2821
    background-color: #808080;
2822
    height: 2px;
2823
    margin-bottom: 5px;
2824
    width: 365px;
2825
}
2826

    
2827
.firewall-contents-end-separator {
2828
    background-color: #808080;
2829
    height: 2px;
2830
    margin-left: -60px;
2831
    margin-top: 5px;
2832
    width: 425px;
2833
}
2834

    
2835
.firewall-apply {
2836
    background-color: #666666;
2837
    border: medium none;
2838
    float: right;
2839
    font-size: 105%;
2840
    height: 18px;
2841
    margin-right: 5px;
2842
    margin-top: 3px;
2843
    width: 75px;
2844
}
2845

    
2846
.name-div {
2847
    margin-left: 70px;
2848
    margin-bottom: 20px;
2849
}
2850

    
2851
.machine-name-div {
2852
    margin-bottom: 20px;
2853
    margin-left: 60px;
2854
}
2855

    
2856
/* Metadata */
2857

    
2858
.info-content {
2859
    clear: both;
2860
    height: 95px;
2861
    width: 512px;
2862
}
2863

    
2864
.metadata-container {
2865
    line-height: 12px;
2866
    height: 85px;
2867
    background-color: #84b7d0;
2868
}
2869

    
2870
.metadata-column {
2871
    border-right: 1px solid #5CA1C0;
2872
    color: black;
2873
    float: left;
2874
    font-size: 60%;
2875
    margin-top: 3px;
2876
    height: 70px;
2877
    padding-bottom: 5px;
2878
}
2879

    
2880
.vm-stats {
2881
    padding-left: 10px;
2882
    padding-right: 5px;
2883
    width: 119px;
2884
}
2885

    
2886
.vm-details {
2887
    width: 169px;
2888
    margin-left:17px;
2889
}
2890

    
2891
.vm-metadata {
2892
    padding-left: 10px;
2893
    width: 129px;
2894
    border: none;
2895
}
2896

    
2897
.metadata-left {
2898
    float:left;
2899
    width: 50px;
2900
    height: 60px;
2901
}
2902

    
2903
.metadata-right {
2904
    width: 73px;
2905
    float:left;
2906
    height: 35px;
2907
    padding-left: 5px;
2908
    position:relative;
2909
    overflow:hidden;
2910
}
2911

    
2912
.metadata-right .items {
2913
    position:absolute;
2914
    height:20000em;
2915
}
2916

    
2917
.metadata-keys-container {
2918
    height: 60px;
2919
    float: left;
2920
}
2921

    
2922
a.manage-metadata {
2923
    font-size: 100%;
2924
    color: black;
2925
    margin-left:17px;
2926
    text-decoration: underline;
2927
}
2928

    
2929
div.machine a.manage-metadata:hover {
2930
    background-color: transparent;
2931
}
2932

    
2933
.metadata-actions, .scrollable {
2934
    padding-left: 5px;
2935
}
2936

    
2937
.metadata-actions .prev,  .metadata-actions .next{
2938
    float:left;
2939
    width:29px;
2940
    height:6px;
2941
    cursor: pointer;
2942
}
2943

    
2944
.metadata-actions .prev {
2945
    background: url("./roll-up.png") no-repeat scroll 0 0 transparent;
2946
}
2947

    
2948
.metadata-actions .next {
2949
    background: url("./roll-down.png") no-repeat scroll 0 0 transparent;
2950
}
2951

    
2952
.scrollable {
2953
    position:relative;
2954
    overflow:hidden;
2955
    height: 35px;
2956
    width: 60px;
2957
    margin-bottom:2px;
2958
}
2959

    
2960
.scrollable .items {
2961
    position:absolute;
2962
    height:20000em;
2963
}
2964

    
2965
.metadata-bar {
2966
    float: right !important;
2967
    margin: 1px 7px 0 !important;
2968
}
2969

    
2970
/* single view */
2971
.single {
2972
    color: #383838;
2973
    margin-top: -76px;
2974
    padding-bottom: 10px;
2975
    width: 679px;
2976
}
2977

    
2978
.single .column1 {
2979
    float: left;
2980
    margin: 1px 0 25px 17px;
2981
    width: 140px;
2982
}
2983

    
2984
.single .column1 .state {
2985
    float: left;
2986
    margin-left: 4px;
2987
    padding-bottom: 6px;
2988
    padding-top: 3px;
2989
    position: relative;
2990
    right: 0;
2991
    text-align: center;
2992
    width: 126px;
2993
}
2994

    
2995
.single .column1 .state-label {
2996
    padding-top: 5px;
2997
}
2998

    
2999
.single .column1 .indicators {
3000
    margin-right: 38px !important;
3001
}
3002

    
3003
.single div.connect-arrow {
3004
    margin-left: -17px;
3005
}
3006

    
3007
.single div.connect-border {
3008
    margin-left: -29px;
3009
}
3010

    
3011
.single .single-actions {
3012
    padding-bottom: 4px;
3013
    padding-left: 15px;
3014
    width: 69px;
3015
    float: left;
3016
}
3017

    
3018
.single div.single-action {
3019
    font-size: 80%;
3020
    line-height: 18px;
3021
    text-decoration: none;
3022
    cursor: pointer;
3023
}
3024

    
3025
.single div.single-action:hover {
3026
    background-color:#A1C8DB;
3027
    width: 180px;
3028
    opacity: 0.8;
3029
    filter: alpha(opacity = 80);
3030
}
3031

    
3032
.single div.single-action.selected {
3033
    color: #FF7F2A !important;
3034
    width: 50px !important;
3035
}
3036

    
3037
.single div.single-action.selected:hover {
3038
    background-color:transparent;
3039
}
3040

    
3041
div.single div.action-container.destroy {
3042
}
3043

    
3044
.single div.confirm_single {
3045
    font-size: 80%;
3046
    margin: -19px -115px 0 0;
3047
}
3048

    
3049
.single div.action-container.destroy div.confirm_single {
3050
    margin: -18px -116px 0 0;
3051
}
3052

    
3053
.single div.confirm_single button.no {
3054
    margin-left: -5px;
3055
}
3056

    
3057
.single .spinner, .single .wave {
3058
    margin: 5px 50px 0 0px !important
3059
}
3060

    
3061
.single div.action_error {
3062
    margin: 2px 0px 0 605px !important;
3063
    position: relative;
3064
}
3065

    
3066
.single .column2 {
3067
    background-color: #A1C8DB;
3068
    float: left;
3069
    font-size: 78%;
3070
    line-height: 17px;
3071
    margin: 0 0 20px 5px;
3072
    width: 358px;
3073
}
3074

    
3075
.single .column2 .machine-labels {
3076
    float: left;
3077
    font-size: 90%;
3078
    margin-left: 10px;
3079
    margin-top: 10px;
3080
    width: 125px;
3081
}
3082

    
3083
.single .column2 .machine-details {
3084
    float: right;
3085
    text-align: right;
3086
    font-size: 90%;
3087
    width: 210px;
3088
    margin-right: 10px;
3089
    margin-top: 10px;
3090
}
3091

    
3092
.single .column2 .name, .single .column2 .disk, .single .column2 .image-size, .single .column2 .ipv6 {
3093
    margin-bottom: 13px;
3094
}
3095

    
3096
.single .tags {
3097
    clear: both;
3098
    margin-bottom: 10px;
3099
    margin-left: 10px;
3100
}
3101

    
3102
.single .tags-label {
3103
    float: left;
3104
    height: 14px;
3105
    margin-top: -2px;
3106
    padding: 0 5px;
3107
    width: 30px;
3108
}
3109

    
3110
.single .tags-down-arrow {
3111
    background: url("/static/tags-down-arrow.png") no-repeat scroll 1px 7px transparent;
3112
    float: left;
3113
    height: 16px;
3114
    width: 9px;
3115
}
3116

    
3117
.single .tags-header {
3118
    background-color: #84B7D0;
3119
    cursor: pointer;
3120
    height: 16px;
3121
    width: 55px;
3122
}
3123

    
3124
.single .tags-content {
3125

    
3126
}
3127

    
3128
.single .column3 {
3129
    background-color: #A1C8DB;
3130
    margin-left: 535px;
3131
    position: absolute;
3132
    top: 280px;
3133
    width: 150px;
3134
    overflow: visible;
3135
    padding-bottom: 10px;
3136
}
3137

    
3138
.single .column3 .controls {
3139
    font-size: 80%;
3140
    height: 20px;
3141
    padding-left: 7px;
3142
    padding-right: 7px;
3143
    padding-top: 8px;
3144
}
3145

    
3146
.single .column3 .previous {
3147
    float:left;
3148
    width: 72px;
3149
}
3150

    
3151
.single .column3 .next {
3152
    float: right;
3153
    text-align: center;
3154
    width: 60px;
3155
}
3156

    
3157
.single .column3 .next-label {
3158
    float: right;
3159
    margin-right: 3px;
3160
    margin-top: -2px;
3161
}
3162

    
3163
.single .column3 .next-arrow {
3164
    float: right;
3165
    height: 18px;
3166
    width: 10px;
3167
    background: url("./right-arrow.png") no-repeat scroll 3px 2px transparent;
3168
}
3169

    
3170
.single .column3 .prev-label {
3171
    float: left;
3172
    margin-left: 3px;
3173
    margin-top: -2px;
3174
}
3175

    
3176
.single .column3 .prev-arrow {
3177
    background: url("./left-arrow.png") no-repeat scroll 3px 2px transparent;
3178
    float: left;
3179
    height: 18px;
3180
    width: 10px;
3181
}
3182

    
3183
.single .column3 .separator {
3184
    width: 135px;
3185
    height: 1px;
3186
    background-color: #84B7D0;
3187
    margin: 0 0 0 7px;
3188
    clear: both;
3189
}
3190

    
3191
.single .column3 .servers {
3192
    font-size: 80%;
3193
    line-height: 15px;
3194
    padding-top: 10px;
3195
    text-align: right;
3196
    overflow: visible;
3197
    position: relative;
3198
}
3199

    
3200
.single .column3 .server-name {
3201
    margin-left: 10px;
3202
    padding-right: 5px;
3203
    cursor: pointer;
3204
    padding-bottom: 2px;
3205
}
3206

    
3207
div.single div.column3 div.server-name:hover, .single .column3 .column3-selected {
3208
    background-color: #84B7D0;
3209
    color: white;
3210
    opacity: 0.8;
3211
    padding-left: 9px;
3212
    text-align: left;
3213
    width: 160px;
3214
    filter: alpha(opacity = 80);
3215
    position: relative;
3216
}
3217

    
3218
.single .toggler {
3219
    color: #FFFFFF;
3220
    float: right;
3221
    font-size: 140%;
3222
    padding-right: 7px;
3223
    padding-top: 7px;
3224
}
3225

    
3226
.single .single-cpu, .single .single-network {
3227
    float: left;
3228
    height: 100px;
3229
    width: 48%;
3230
}
3231

    
3232
.single .cpu-usage, .single .network-usage {
3233
    padding-bottom: 15px;
3234
    padding-left: 20px;
3235
    padding-top: 15px;
3236
    font-size: 90%;
3237
}
3238

    
3239
.single .cpu-graph, .single .network-graph {
3240
    background-color: #A1C8DB;
3241
    height: 210px;
3242
    margin-left: 20px;
3243
    width: 300px;
3244
}
3245

    
3246
.single .single-image {
3247
    width: 126px;
3248
    margin-bottom: 10px;
3249
    margin-left: 4px;
3250
}
3251

    
3252
.single .column3 .previous, .single .column3 .next {
3253
    cursor: pointer;
3254
    background-color: #84B7D0;
3255
    color: white;
3256
    font-size: 100%;
3257
    height: 15px;
3258
    padding-top: 2px;
3259
}
3260

    
3261
.single div.lower {
3262
    clear:both;
3263
    background: url("./running-bg.png") repeat scroll 0 0 transparent;
3264
    width: 700px;
3265
    height: 270px;
3266
}
3267

    
3268
.single div.upper {
3269
    background: url("./running-bg.png") repeat scroll 0 0 transparent;
3270
    height: 300px;
3271
    margin-bottom: 10px;
3272
    padding-top: 60px;
3273
    width: 700px;
3274
}
3275

    
3276
/* console css */
3277
.console-header-logo {
3278
    padding-top: 10px;
3279
    margin-left: 30px;
3280
    position: fixed;
3281
}
3282

    
3283
div.console-container {
3284
    margin: 0 0em;
3285
    height: auto;
3286
}
3287

    
3288
#wrapper.console {
3289
    width: auto;
3290
}
3291

    
3292
.console-info {
3293
    font-size:80%;
3294
    color: white;
3295
    float:left;
3296
    position:relative;
3297
    margin: 25px 0 0 480px;
3298
}
3299

    
3300
applet {
3301
    width: 100%;
3302
    height:75%;
3303
}
3304

    
3305
.console-footer #footer-text{
3306
    float:left;
3307
    left: auto;
3308
    margin-left:30px;
3309
}
3310

    
3311
/* add network wizard (see also #wizard for shared classes) */
3312
#networks-wizard .header {
3313
    background-color: #4085A5;
3314
    height: 56px;
3315
}
3316

    
3317
#networks-wizard div.name-input {
3318
    margin: 75px 0 0 55px;
3319
}
3320

    
3321
#networks-wizard input {
3322
    border: 1px solid #CCCCCC;
3323
    color: #445566;
3324
    letter-spacing: 1px;
3325
    width: 170px;
3326
}
3327

    
3328
#networks-wizard span.help {
3329
    font-style: italic;
3330
    font-size: 80%;
3331
    margin-left: 10px;
3332
}
3333

    
3334
#networks-wizard .separator-end {
3335
    background-color: #387693;
3336
    height: 6px;
3337
    width: 479px;
3338
    margin-left: -13px;
3339
    margin-top: 5px;
3340
}
3341

    
3342
.red {
3343
    color: red;
3344
}
3345

    
3346
/* add server to network wizard (see also #metadata-wizard for shared classes) */
3347
#add-machines-wizard span.machine-name {
3348
    margin-left: 4px;
3349
    vertical-align: text-top;
3350
}
3351

    
3352
#add-machines-wizard img.list-logo {
3353
    margin: 2px 1px 1px;
3354
}
3355

    
3356
.css-panes {
3357
    clear: both;
3358
}
3359

    
3360
.last .network-separator {
3361
    background-color: white;
3362
    height: 10px;
3363
    margin-left: -50px;
3364
    margin-top: -12px;
3365
    width: 20px;
3366
}
3367

    
3368
.last .firewall-content {
3369
    margin-bottom:13px;
3370
}
3371

    
3372
#pub:hover .last .network-separator {
3373
    background-color: #CDE2EC;
3374
}
3375

    
3376
.public-networks .empty-network-slot {
3377
    display: none;
3378
}