Statistics
| Branch: | Tag: | Revision:

root / ui / static / main.css @ 24990e31

History | View | Annotate | Download (60.1 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
    text-align: center;
115
    width: 170px;
116
}
117

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

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

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

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

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

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

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

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

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

    
178
.css-panes > div.pane {
179
    display:none;
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
#beforecreate {
217
    position:relative;
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
    margin-left: 37px;
334
    margin-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
    margin-left: 15px;
444
    font-size: 95%;
445
}
446

    
447
#wizard #status {
448
    height: 50px;
449
    background-color: #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, #wizard .bottomruler, #networks-wizard .bottomruler {
486
    background-color: #CDE2EC;
487
    color: #CDE2EC;
488
    border: 0 none;
489
    height: 4px;
490
    margin-left: -1px;
491
    width: 447px;
492
    margin-bottom: 6px;
493
    margin-top: 4px;
494
}
495

    
496
#wizard .bottomruler, #networks-wizard .bottomruler {
497
    margin-top:6px;
498
}
499

    
500
#networks-wizard .topruler, #networks-wizard .bottomruler {
501
    width: 455px;
502
    float: left;
503
}
504

    
505
#wizard #cancel, #networks-wizard .cancel {
506
    background-color: #4085A5;
507
    border-color: #4085A5;
508
    text-align: center !important;
509
}
510

    
511
#wizard #cancel:hover, #networks-wizard .cancel:hover {
512
    background-color: #7DB4CD;
513
    border-color: #7DB4CD;
514
}
515

    
516
#wizard #start, #networks-wizard .create {
517
    text-align: center;
518
    background-color: #FF6600;
519
    border-color: #FF6600;
520
}
521

    
522
#wizard .img-next {
523
    margin-right: -4px;
524
    padding-left: 8px;
525
    margin-bottom: -1px;
526
}
527

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

    
534
#networks-wizard .create {
535
    float:right;
536
    width: 140px;
537
}
538

    
539
#wizard #start:hover, #networks-wizard .create:hover {
540
    background-color: #FF9651;
541
    border-color: #FF9651;
542
}
543

    
544
#wizard .separator-end {
545
    position: absolute;
546
    background-color: #387693;
547
    height: 5px;
548
    margin-left: -14px;
549
    margin-top: 362px;
550
    width: 550px;
551
}
552

    
553
.page ul {
554
    height: 270px;
555
    overflow: auto;
556
}
557

    
558
.panes ul.pane {
559
    height: 220px;
560
}
561

    
562
#wizard #tabscontainer {
563
    background-color: #CDE2EC;
564
    height: 20px;
565
    width: 448px;
566
}
567

    
568
.page ul.tabs {
569
    overflow: hidden;
570
    height: auto;
571
    margin-bottom: -1px;
572
    margin-top: -1px;
573
}
574

    
575
.page ul.tabs li {
576
    float: right;
577
    margin: 0 0.2em;
578
}
579

    
580
#status li {
581
    float: left;
582
    color: #387693;
583
    padding: 0 1px 0 37px;
584
    bottom: 0px;
585
}
586

    
587
#status li.active .headernumber {
588
    color: #FFFFFF;
589
}
590

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

    
595
div.image-container {
596
    border-bottom: 1px solid #CCCCCC;
597
    margin-left: 10px;
598
    margin-right: 10px;
599
}
600

    
601
#page2-container {
602
    background-color: #ECF4F8;
603
    height: 193px;
604
    margin-top: 3px;
605
    padding-top: 25px;
606
}
607

    
608
#page3-container {
609
    background-color: #ECF4F8;
610
    height: 245px;
611
    margin-bottom: 32px;
612
    padding-left: 50px;
613
}
614

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

    
626
.sliders {
627
    float:left;
628
    width: 40px;
629
    margin-left: 10px;
630
    margin-top: 3px;
631
}
632

    
633
.units {
634
    padding-left:10px;
635
}
636

    
637
.slider-container {
638
    padding-bottom: 15px;
639
    margin-left: 5px;
640
}
641

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

    
655
/* progress bar (enabled with progress: true) */
656
.progress {
657
    height: 3px;
658
    background-color: #387693;
659
}
660

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

    
672
.selectedrange {
673
    border-color: #5599FF;
674
}
675

    
676
#credits-indicator {
677
    background-color: #ECF4F8;
678
    float: none;
679
    margin: 0 0 0 10px;
680
    border: 1px solid #387693;
681
    color: #387693;
682
}
683

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

    
694
div.machine {
695
    margin-left: -7px;
696
    min-height: 65px;
697
    padding-left: 7px;
698
    padding-right: 5px;
699
    padding-top: 2px;
700
    width: 516px;
701
}
702

    
703
div.machine:hover {
704
    background-color:#A1C8DB !important;
705
}
706

    
707
div.machine.light-background {
708
    background-color:#aed2e3;
709
}
710

    
711
.single .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
    margin-top: -40px;
741
}
742

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
950
.build-state .indicator1, .build-state .indicator2, .build-state .indicator3, .build-state .indicator4 {
951
    background-color: #5CA1C0;
952
}
953

    
954
.network-indicator .indicator1, .network-indicator .indicator2, .network-indicator .indicator3, .network-indicator .indicator4 {
955
    background-color: #5CA1C0;
956
}
957

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

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

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

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

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

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

    
1002
div.machine div.info-label.darker, .single div.tags-label.darker {
1003
    background-color: #5CA1C0;
1004
}
1005

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

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

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

    
1025
.single div.tags div.down {
1026
    background: url(/static/down-arrow.png) no-repeat scroll 2px 2px;
1027
}
1028

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

    
1033
.single div.tags div.up {
1034
    background: url(/static/up-arrow.png) no-repeat scroll 2px 2px;
1035
}
1036

    
1037
button {
1038
    background-color: #87AADE;
1039
    border: 1px solid #87AADE;
1040
    color: #FFFFFF;
1041
    cursor: pointer;
1042
    height: 23px;
1043
    width: 120px;
1044
}
1045

    
1046
button.next {
1047
    background-color: #4085A5;
1048
    border-color: #4085A5;
1049
    text-align: right;
1050
}
1051

    
1052
button.next:hover {
1053
    background-color: #7DB4CD;
1054
    border-color: #7DB4CD;
1055
}
1056

    
1057
button.prev {
1058
    background-color: #4085A5;
1059
    border-color: #4085A5;
1060
    margin-left: -1px;
1061
    text-align: left;
1062
}
1063

    
1064
button.prev:hover {
1065
    background-color: #7DB4CD;
1066
    border-color: #7DB4CD;
1067
}
1068

    
1069
.image-logo {
1070
    float: left;
1071
    margin-right: 1em;
1072
    margin-left: 1.5em;
1073
    margin-top: 4px;
1074
}
1075

    
1076
div.image {
1077
    clear: both;
1078
    display: block;
1079
    margin-bottom: 3px;
1080
    margin-top: 3px;
1081
    padding: 5px;
1082
}
1083

    
1084
div#view-select {
1085
    float: right;
1086
    clear: both;
1087
    color: white;
1088
    position: relative;
1089
    right: 5px;
1090
    top: -35px;
1091
    display: none;
1092
    z-index: 1000;
1093
}
1094

    
1095
a#standard, a#list, a#single {
1096
    text-decoration: none;
1097
    height: 15px;
1098
    width: 17px;
1099
    padding: 1px 8px 2px 9px;
1100
}
1101

    
1102
div#view-select a {
1103
    color:#5f8dd3;
1104
}
1105

    
1106
a#list:hover {
1107
    background: #5f8dd3;
1108
}
1109

    
1110
a#standard:active, a#list:active {
1111
    color:white;
1112
}
1113

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

    
1118
a#list {
1119
    background: url(./list-view.png) no-repeat -36px 0;
1120
}
1121

    
1122
a#single {
1123
    background: url(./single-view.png) no-repeat -36px 0;
1124
}
1125

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

    
1130
a#list:hover {
1131
    background: url(./list-view.png) no-repeat -18px 0;
1132
}
1133

    
1134
a#single:hover {
1135
    background: url(./single-view.png) no-repeat -18px 0;
1136
}
1137

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

    
1142
a#list.activelink {
1143
    background: url(./list-view.png) no-repeat 0px 0;
1144
}
1145

    
1146
a#single.activelink {
1147
    background: url(./single-view.png) no-repeat 0px 0;
1148
}
1149

    
1150
#machinetype {
1151
    background-color: #CDE2EC;
1152
    height: 25px;
1153
    margin-bottom: 0px !important;
1154
}
1155

    
1156
div.machine-type {
1157
    float: left;
1158
    margin: 4px 18px 20px;
1159
}
1160

    
1161
.machine-type .active {
1162
    color: #FFFFFF
1163
}
1164

    
1165
#machinesview {
1166
    min-height: 270px;
1167
    margin-top: 40px;
1168
}
1169

    
1170
.list#machinesview {
1171
    margin-left: -20px;
1172
    display:none;
1173
}
1174

    
1175
#machinesview-list.list {
1176
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
1177
    margin-top: -76px;
1178
    padding-left: 15px;
1179
    padding-top: 76px;
1180
    min-height: 270px;
1181
}
1182

    
1183
#machinesview_content {
1184
    display:none;
1185
}
1186

    
1187
.list-machines {
1188
    min-width: 515px;
1189
}
1190

    
1191
#emptymachineslist {
1192
    background-color: #6BA9C6;
1193
    color: #A0A0A0;
1194
    display: none;
1195
    margin-top: -45px;
1196
    padding: 65px 150px 35px;
1197
    text-align: justify;
1198
}
1199

    
1200
#welcomeheader {
1201
    color:white;
1202
    text-align: center;
1203
}
1204

    
1205
.welcomebody {
1206
    color: white;
1207
    font-size:80%;
1208
}
1209

    
1210
.welcomebody a {
1211
    color: white;
1212
}
1213

    
1214
.welcomefooter {
1215
    color: white;
1216
    font-size:60%;
1217
}
1218

    
1219
.welcomefooter a {
1220
    color: white;
1221
}
1222

    
1223
.emptycreatecontainer {
1224
    margin-left: 430px !important;
1225
    position: absolute;
1226
    margin-top: 5px !important;
1227
    width: 180px;
1228
    background-color: #CCCCCC;
1229
    padding: 5px;
1230
    padding-left: 10px;
1231
}
1232

    
1233
.emptycreate {
1234
    margin: 20px 10px 5px 0 !important;
1235
}
1236

    
1237
#createbody {
1238
    display:none;
1239
    font-size: 80%;
1240
}
1241

    
1242
div.list label img {
1243
    margin: 5px 5px -3px 0;
1244
}
1245

    
1246
div.list label {
1247
    color: #3D3D3D;
1248
    font-size: 75%;
1249
}
1250

    
1251
div.list .state {
1252
    margin-top: 7px;
1253
    margin-right: 10px;
1254
}
1255

    
1256
div.list table tbody {
1257
    margin-top: 8px;
1258
}
1259

    
1260
div.list .stopped {
1261
    margin-top: 8px;
1262
}
1263

    
1264
/* root element for tabs  */
1265
#wizard ul.tabs {
1266
    margin-right: -1px;
1267
    float: right;
1268
}
1269

    
1270
#wizard div.panes {
1271
    height: 247px;
1272
    clear:both;
1273
    margin-top: 3px;
1274
}
1275

    
1276
.typebody {
1277
    font-size: 80%;
1278
    font-weight: normal;
1279
    position: relative;
1280
    top: -3px;
1281
}
1282

    
1283
.typehover {
1284
    color: #FFFFFF;
1285
}
1286

    
1287
#label-name {
1288
    margin-top: 10px;
1289
}
1290

    
1291
/* single tab */
1292
#wizard ul.tabs li {
1293
    margin-bottom: 0;
1294
    list-style-type:none;
1295
    float: left;
1296
}
1297

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

    
1314
#wizard ul.tabs a:hover {
1315
    color: #FFFFFF;
1316
    background-color:#4085A5;
1317
}
1318

    
1319
/* selected tab */
1320
#wizard ul.tabs a.current {
1321
    color: white;
1322
    background-color: #7DB4CD;
1323
    cursor: default;
1324
}
1325

    
1326
#wizard #standard-images {
1327
    background-color: #ECF4F8;
1328
}
1329

    
1330
div.list div.actions {
1331
    display: none;
1332
    clear: left;
1333
    float: right;
1334
    margin-right: 15px;
1335
    margin-top: 37px;
1336
    text-align: right;
1337
    width: 120px;
1338
}
1339

    
1340
div.list div.actions a {
1341
    clear: left;
1342
    color: #A1A1A1;
1343
    display: block;
1344
    font-size:75%;
1345
    margin-bottom: 2px;
1346
}
1347

    
1348
div.list div.actions a:hover {
1349
    background-color: transparent;
1350
}
1351

    
1352
div.list div.actions a.enabled {
1353
    color: #3D3D3D;
1354
}
1355

    
1356
div.list div.actions a.enabled:hover{
1357
    cursor: pointer;
1358
    color: black;
1359
    text-decoration: underline;
1360
}
1361

    
1362
div.list div.actions a.selected {
1363
    color: #FF7F2A !important;
1364
}
1365

    
1366
input.machine {
1367
    width: 13px;
1368
    height: 13px;
1369
    top: -1px;
1370
    overflow: hidden;
1371
}
1372

    
1373
.description-container {
1374
    display: inline-block;
1375
    position: relative;
1376
    width: 300px;
1377
}
1378

    
1379
#wizard .button-container {
1380
    height: 20px;
1381
}
1382

    
1383
/* metadata editing and add machines to network overlays */
1384
#metadata-wizard, #add-machines-wizard {
1385
    position:absolute !important;
1386
    overflow:hidden;
1387
    width:450px;
1388
    display:none;
1389
    background-color:#fff;
1390
    text-align:left;
1391
    font-size: 80%;
1392
    border-bottom: 5px solid #4085A5;
1393
}
1394

    
1395
#metadata-wizard .close, #add-machines-wizard .close  {
1396
    background-image: url("./close-popup.png");
1397
    cursor: pointer;
1398
    height: 13px;
1399
    position: absolute;
1400
    right: 7px;
1401
    top: 9px;
1402
    width: 13px;
1403
}
1404

    
1405
#metadata-wizard .popup-header, #add-machines-wizard .popup-header {
1406
    background-color: #4085A5;
1407
    color: white;
1408
    font-size: 95%;
1409
    font-weight: normal;
1410
    height: 20px;
1411
    margin-left: -16px;
1412
    margin-top: -16px;
1413
    padding-bottom: 2px;
1414
    padding-left: 30px;
1415
    padding-top: 10px;
1416
    width: 482px;
1417
}
1418

    
1419
#metadata-wizard .popup-title, #metadata-wizard .machine-name, #add-machines-wizard .popup-title, #add-machines-wizard .network-name {
1420
    font-size: 120%;
1421
    padding-bottom: 7px;
1422
    padding-top: 10px;
1423
    float:left;
1424
}
1425

    
1426
#metadata-wizard .popup-title {
1427
    padding-bottom: 0px;
1428
    font-size: 120%;
1429
}
1430

    
1431
#metadata-wizard .name-container {
1432
    display: inline-block;
1433
}
1434

    
1435
#add-machines-wizard .network-name {
1436
    padding-left: 5px;
1437
}
1438

    
1439
#metadata-wizard .popup-body, #add-machines-wizard .popup-body {
1440
    background-image: url("./meta-wiz-bg.png");
1441
    margin-left: -16px;
1442
    margin-right: -16px;
1443
    margin-top: 1px;
1444
    height: 250px;
1445
    overflow-y: auto;
1446
    overflow-x: hidden;
1447
}
1448

    
1449
#metadata-wizard .popup-body-inner, #add-machines-wizard .popup-body-inner {
1450
    background-image: url("./meta-wiz-inner-bg.png");
1451
    font-size: 80%;
1452
    height: 180px;
1453
    margin-left: 25px;
1454
    margin-top: 10px;
1455
    padding-left: 15px;
1456
    width: 420px;
1457
}
1458

    
1459
#metadata-wizard .popup-separator, #add-machines-wizard .popup-separator {
1460
    background-color: #74AEC9;
1461
    height: 1px;
1462
    width: 402px;
1463
    margin-bottom: 30px;
1464
    clear: left;
1465
    font-size: 1px;
1466
}
1467

    
1468
#metadata-wizard .metadata-pair-template {
1469
    height: 15px;
1470
    padding-top: 2px;
1471
    width: 350px;
1472
}
1473

    
1474
#metadata-wizard div.metadata-pair-template:hover {
1475
    background-color: #74AEC9;
1476
}
1477

    
1478
#metadata-wizard .metadata-container, #add-machines-wizard .machines-container {
1479
    background-color: transparent;
1480
    float: left;
1481
    width: 400px;
1482
    font-size: 120%;
1483
}
1484

    
1485
#metadata-wizard .machine-icon {
1486
    float: left;
1487
    padding-left: 10px;
1488
    padding-right: 3px;
1489
    padding-top: 7px;
1490
}
1491

    
1492
#metadata-wizard .large-spinner, #add-machines-wizard .large-spinner {
1493
    display: block;
1494
    margin: 50px 0 0 185px;
1495
}
1496

    
1497
#metadata-wizard .metadata-key {
1498
    float: left;
1499
    width: 110px;
1500
    padding-left: 5px;
1501
}
1502

    
1503
#metadata-wizard .metadata-value {
1504
    width: auto;
1505
}
1506

    
1507
#metadata-wizard .metadata-add-template {
1508
    background-color: #74AEC9;
1509
    width: 350px;
1510
    position: relative;
1511
    overflow: visible;
1512
}
1513

    
1514
#metadata-wizard #add-meta-value {
1515
    margin-left: 25px;
1516
    width: 150px;
1517
}
1518

    
1519
#metadata-wizard button, #add-machines-wizard button {
1520
    font-size: 80%;
1521
    width: 87px;
1522
    float: right;
1523
    background-color: #5599FF;
1524
    border: 0px solid #5599FF;
1525
    padding: 0;
1526
    text-align: center;
1527
    margin-right: 8px;
1528
}
1529

    
1530
#metadata-wizard .buttons, #add-machines-wizard .buttons {
1531
    border-top: 2px solid #4085A5;
1532
    height: 30px;
1533
    margin-left: 25px;
1534
    margin-right: 40px;
1535
    width: 400px;
1536
    font-size: 120%;
1537
}
1538

    
1539
#metadata-wizard button.save, #add-machines-wizard button.cancel {
1540
    float: left;
1541
    height: 23px;
1542
    margin: 10px 0 0 0;
1543
    width: 87px;
1544
    background-color: #4085A5;
1545
    border-color: #4085A5;
1546
}
1547

    
1548
#metadata-wizard button.save:hover, #add-machines-wizard button.cancel:hover {
1549
    background-color: #7DB4CD;
1550
    border-color: #7DB4CD;
1551
}
1552

    
1553
#metadata-wizard button.create, #add-machines-wizard button.add {
1554
    height: 23px;
1555
    margin: 10px 0 0 0;
1556
    background-color: #FF6600;
1557
    border-color: #FF6600;
1558
}
1559

    
1560
#metadata-wizard button.create:hover, #add-machines-wizard button.add:hover {
1561
    background-color: #FF9651;
1562
    border-color: #FF9651;
1563
}
1564

    
1565
#metadata-wizard .editbuttons {
1566
    margin-top: 4px;
1567
    margin-right: 0;
1568
}
1569

    
1570
#metadata-wizard .vertical-separator {
1571
    height: 17px;
1572
    width: 1px;
1573
    background-color: #74AEC9;
1574
    float:left;
1575
    margin-right: 10px;
1576
}
1577

    
1578
#metadata-wizard h3, #add-machines-wizard h3 {
1579
    font-weight:normal;
1580
}
1581

    
1582
#metadata-wizard .metadata-edit {
1583
    clear: none;
1584
    cursor: pointer;
1585
    float: right;
1586
    margin-right: 0;
1587
    width: 40px;
1588
    margin-top: -14px;
1589
    display:none;
1590
}
1591

    
1592
#metadata-wizard .metadata-edit .edit, #metadata-wizard .metadata-edit .remove {
1593
    background-repeat: no-repeat;
1594
    color: transparent;
1595
    font-size: 75%;
1596
    float: left;
1597
    width: 16px;
1598
    height: 16px;
1599
}
1600

    
1601
#metadata-wizard .addbuttons {
1602
    display: block;
1603
    clear: none;
1604
    width: 40px;
1605
    margin-right: -1px !important;
1606
    margin-top: 2px;
1607
    float:right;
1608
    cursor: pointer;
1609
}
1610

    
1611
.metadata-pair-template .editbuttons {
1612
    margin-top: -19px !important;
1613
    margin-right: -2px !important;
1614
}
1615

    
1616
#metadata-wizard .metadata-edit .edit {
1617
    background-image: url("./meta-edit.png");
1618
    margin-left: 2px;
1619
}
1620

    
1621
#metadata-wizard .metadata-edit .remove, #metadata-wizard .editbuttons .remove {
1622
    background-image: url("./meta-remove.png");
1623
    margin-left: 4px;
1624
    background-repeat: no-repeat;
1625
    color: transparent;
1626
    font-size: 75%;
1627
    height: 16px;
1628
    width: 16px;
1629
    float: left;
1630
}
1631

    
1632
#metadata-wizard .editbuttons .save {
1633
    background-image: url("./meta-save.png");
1634
    padding-top:0;
1635
}
1636

    
1637
#metadata-wizard .addbuttons .cancel {
1638
    background-image: url("./meta-remove.png");
1639
    margin-left: 3px;
1640
}
1641

    
1642
#metadata-wizard .addbuttons .save {
1643
    background-image: url("./meta-save.png");
1644
    margin-left: 1px;
1645
}
1646

    
1647
#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 {
1648
    background-color: #4287a7;
1649
}
1650

    
1651
#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 {
1652
    background-color: #74AEC9;
1653
}
1654

    
1655
#metadata-wizard .addbuttons .cancel, #metadata-wizard .addbuttons .save {
1656
    width: 16px;
1657
    height: 16px;
1658
    float: left;
1659
    background-repeat: no-repeat;
1660
    color: transparent;
1661
}
1662

    
1663
#metadata-wizard .metatextbox {
1664
    font-size: 90%;
1665
    height: 18px;
1666
    margin-top: -2px;
1667
    color: black;
1668
    width: 150px;
1669
}
1670

    
1671
#metadata-wizard p, #add-machines-wizard p {
1672
    margin-left: 7px;
1673
    width: 200px;
1674
}
1675

    
1676
#metadata-wizard div.bottomruler, #add-machines-wizard div.bottomruler {
1677
    background-color: #666;
1678
    height: 20px;
1679
    margin-top: 17px;
1680
}
1681

    
1682
#metadata-wizard button.remove {
1683
    height: 15px;
1684
    width: 70px;
1685
    background-color: #d35f5f;
1686
    border-color: #d35f5f;
1687
}
1688

    
1689
#metadata-wizard button.edit {
1690
    height: 15px;
1691
    width: 70px;
1692
    background-color: #666;
1693
    border-color: #666;
1694
    margin-top: -12px;
1695
}
1696

    
1697
#metadata-wizard input {
1698
    font-style: italic;
1699
    color: #ccc;
1700
}
1701

    
1702
#metadata-wizard textarea.edit-meta-value {
1703
    font-style: normal;
1704
    text-align: left;
1705
    color: black;
1706
    margin-top: 2px;
1707
    width:200px;
1708
    height: 49px;
1709
}
1710

    
1711
#metadata-wizard input {
1712
    font-size: 80%;
1713
}
1714

    
1715
#metadata-wizard input.key {
1716
    height: 15px;
1717
    left: 460px;
1718
    position: absolute;
1719
    top: 83px;
1720
    width: 230px;
1721
}
1722

    
1723
#metadata-wizard textarea.value {
1724
    width: 267px;
1725
    height: 170px;
1726
    overflow: auto;
1727
}
1728

    
1729
#metadata-wizard .input-enabled {
1730
    color: black;
1731
    text-align: left;
1732
    font-style: normal;
1733
}
1734

    
1735
#metadata-wizard label.meta-value {
1736
    vertical-align: top;
1737
}
1738

    
1739
#metadata-wizard button.cancel, #metadata-wizard #edit-dialog button.close {
1740
    float: left;
1741
    margin: 4px 0 0 25px;
1742
    background-color: #d35f5f;
1743
    border-color: #d35f5f;
1744
}
1745

    
1746
/* metadata dropdown combo */
1747
.meta-key {
1748
    margin-right: 18px;
1749
    float:left;
1750
}
1751
#metadata-wizard .textdropdown-outer {
1752
    float: left;
1753
}
1754

    
1755
#metadata-wizard .textdropdown-btn {
1756
    background: url("./dropdown-arrow.gif") no-repeat scroll center center transparent;
1757
    cursor: pointer;
1758
    float: right;
1759
    left: 90px;
1760
    margin-top: 4px;
1761
    position: absolute;
1762
    width: 20px;
1763
}
1764

    
1765
#metadata-wizard ul {
1766
    border: 1px solid #ccc;
1767
    padding: 0px;
1768
    list-style: none;
1769
    margin: 0px;
1770
    background-color: white;
1771
    height: auto !important;
1772
    padding-left: 5px;
1773
    width: 103px !important;
1774
}
1775

    
1776
#metadata-wizard ul li {
1777
    clear: both;
1778
    display: block;
1779
    float: right;
1780
    list-style: none outside none;
1781
    margin-bottom: 0 !important;
1782
    margin-left: 0 !important;
1783
    padding-bottom: 2px;
1784
    padding-right: 2px;
1785
    padding-top: 2px;
1786
    width: 100%;
1787
}
1788

    
1789
#metadata-wizard ul li:hover {
1790
    background-color: #efefef;
1791
    cursor: pointer;
1792
}
1793

    
1794
#metadata-wizard .dropdownitem {
1795
    margin-left: 10px;
1796
}
1797

    
1798
#metadata-wizard #txtdropdown:focus {
1799
    outline: 0 none;
1800
}
1801

    
1802
#metadata-wizard #add-meta-key {
1803
    height: 16px;
1804
    margin-left: 5px;
1805
    margin-top: 2px;
1806
    width: 105px !important;
1807
}
1808

    
1809
/* notification box */
1810
#yes-no {
1811
    height: 150px;
1812
    z-index: 9999;
1813
    border-bottom: 5px solid #4085A5;
1814
}
1815

    
1816
#yes-no p, #yes-no button {
1817
    margin-top: 15px;
1818
}
1819

    
1820
#error-success {
1821
    z-index: 9999;
1822
    border-bottom: 5px solid #4085A5;
1823
    min-height: 150px;
1824
    top: 120px !important;
1825
    position: absolute !important;
1826
}
1827

    
1828
#error-success p {
1829
    margin-top: 5px;
1830
}
1831

    
1832
#error-success strong {
1833
    color: #F49C1A;
1834
}
1835

    
1836
#error-success .close {
1837
    background-image: url("./close-popup.png");
1838
    cursor: pointer;
1839
    height: 13px;
1840
    position: absolute;
1841
    right: 7px;
1842
    top: 9px;
1843
    width: 13px;
1844
}
1845

    
1846
.popup-header-error {
1847
    background-color: #800000 !important;
1848
}
1849

    
1850
.popup-border-error {
1851
    border-color: #800000 !important;
1852
}
1853

    
1854
.popup-details-error {
1855
    border: none !important;
1856
}
1857

    
1858
.popup-separator-error {
1859
    margin-bottom: 5px !important;
1860
}
1861

    
1862
#error-success .popup-header {
1863
    background-color: #4085A5;
1864
    color: white;
1865
    font-size: 95%;
1866
    font-weight: normal;
1867
    height: 20px;
1868
    margin-left: -16px;
1869
    margin-top: -16px;
1870
    padding-bottom: 2px;
1871
    padding-left: 30px;
1872
    padding-top: 10px;
1873
    width: 482px;
1874
}
1875

    
1876

    
1877
#error-success.success h3 span.header-box{
1878
    background-color: #71c837;
1879
    display: block;
1880
    background-image: url("./save-green.png");
1881
    background-position: right 0;
1882
    background-repeat: no-repeat;
1883
    width: 80px;
1884
    padding: 3px 3px 3px 8px;
1885
    margin-top: -6px;
1886
    font-size: 90% !important;
1887
    margin-left: -11px;
1888
}
1889

    
1890
#error-success .popup-body {
1891
    background-image: url("./popup-bg.png");
1892
    margin-left: -16px;
1893
    margin-right: -16px;
1894
    margin-top: 1px;
1895
    min-height: 142px;
1896
    padding-top: 10px;
1897
}
1898

    
1899
#error-success .popup-body-inner {
1900
    background: url("./popup-inner-bg.png") repeat-x scroll 0 0 transparent;
1901
    font-size: 80%;
1902
    min-height: 120px;
1903
    margin-left: 20px;
1904
    padding-left: 15px;
1905
    width: 460px;
1906
}
1907

    
1908
#error-success .popup-separator {
1909
    background-color: #74AEC9;
1910
    height: 1px;
1911
    width: 442px;
1912
    margin-bottom: 30px;
1913
}
1914

    
1915
#error-success .machine-now-building {
1916
    font-size: 95%;
1917
    padding-bottom: 7px;
1918
    padding-top: 10px;
1919
}
1920

    
1921
#error-success.success .machine-now-building {
1922
    padding-bottom: 14px !important;
1923
}
1924

    
1925
#error-success .password-container {
1926
    width: 430px;
1927
    padding: 5px;
1928
    border: 2px solid #75b54a;
1929
    background-color: #aade87;
1930
}
1931

    
1932
#error-success .password-header {
1933
    margin-bottom: 5px;
1934
}
1935

    
1936
#error-success .password {
1937
    color: #447821;
1938
}
1939

    
1940
#error-success .popup-details {
1941
    border: 2px solid #FF7F2A;
1942
    float: left;
1943
    margin-left: 10px;
1944
    padding: 2px;
1945
}
1946

    
1947
#error-success.success .popup-details {
1948
    border: none !important;
1949
    float: none !important;
1950
    margin-left: none !important;
1951
    margin-top: 10px;
1952
}
1953

    
1954
#error-success.success .popup-separator {
1955
    margin-bottom: 14px !important;
1956
}
1957

    
1958

    
1959
#error-success .write-password {
1960
    margin-bottom: 5px;
1961
    padding-left: 30px;
1962
}
1963

    
1964
#error-success .write-password-password {
1965
    padding-left: 30px;
1966
    color: #447821;
1967
    display: inline;
1968
    font-size: 110%;
1969
    font-weight: bold;
1970
}
1971

    
1972
#error-success .write-password-details {
1973
    font-size: 75%;
1974
}
1975

    
1976
.more-details {
1977
    display: block;
1978
}
1979

    
1980
.popup-details a:link, .popup-details a:visited{
1981
    color: black;
1982
}
1983

    
1984
/* Confirmation boxes */
1985
div.confirm_single, div.confirm_multiple, div.action_error {
1986
    display: none;
1987
    color: black;
1988
}
1989

    
1990
div.action-container.destroy div.confirm_single {
1991
    bottom: 0;
1992
    position: absolute;
1993
    left: 83px;
1994
}
1995

    
1996
div.terminated div.action-container.destroy div.confirm_single {
1997
    margin-top: 30px;
1998
}
1999

    
2000
div.confirm_single button, div.confirm_multiple button, div.action_error button {
2001
    font-size: 100%;
2002
    cursor: pointer;
2003
    color: black;
2004
    height: 20px !important;
2005
}
2006

    
2007
div.confirm_single {
2008
    float: right;
2009
    margin: -20px -122px 0 0;
2010
}
2011

    
2012
div.confirm_single button {
2013
    border: none;
2014
}
2015

    
2016
div.confirm_single button.yes {
2017
    width: 90px;
2018
    background-color:#FF7F2A;
2019
}
2020

    
2021
div.confirm_single button.yes:hover {
2022
    background-color: #FF9955;
2023
}
2024

    
2025
div.confirm_single button.no {
2026
    width: 20px;
2027
    margin-left:-5px;
2028
    background-color: #FF9955;
2029
    color:#d95d0a;
2030
}
2031

    
2032
div.confirm_single button.no:hover {
2033
    color: white;
2034
}
2035

    
2036
div.confirm_multiple {
2037
    background-color: #4085A5;
2038
    font-size: 75%;
2039
    z-index: 1;
2040
    position: absolute;
2041
    width: 698px;
2042
    height: 28px;
2043
    margin-top: 15px;
2044
}
2045

    
2046
div.confirm_multiple p {
2047
    float: left;
2048
    color: #FF7F2A;
2049
    font-weight: bold;
2050
    margin: 7px 0 0 200px;
2051
}
2052

    
2053
#networks-pane div.confirm_multiple p {
2054
    margin: 7px 0 0 100px;
2055
}
2056

    
2057
div.confirm_multiple button {
2058
    float: right;
2059
    background-color: transparent;
2060
    border: 1px solid #5CA1C0;
2061
    margin: 4px 5px 0 0;
2062
}
2063

    
2064
div.confirm_multiple button.yes {
2065
    border-color: #FF7F2A;
2066
    padding: 0 12px;
2067
}
2068

    
2069
div.confirm_multiple button.yes:hover {
2070
    background-color: #FF7F2A;
2071
}
2072

    
2073
div.confirm_multiple button.no {
2074
    padding: 0px 16px;
2075
}
2076

    
2077
div.confirm_multiple button.no:hover {
2078
    background-color: #5CA1C0;
2079
}
2080

    
2081
div.action_error {
2082
    width: 80px;
2083
    height: 60px;
2084
    padding: 5px;
2085
    margin: -2px 0 0 595px;
2086
    background-color: #4085A5;
2087
    font-size: 75%;
2088
    line-height: 1.5;
2089
    z-index:1;
2090
    color: #FF7F2A;
2091
    position:absolute;
2092
    top: 0px;
2093
}
2094

    
2095
.action_error button {
2096
    width: 80px !important;
2097
    background-color: transparent;
2098
    border: 1px solid;
2099
    padding: 0px;
2100
    border-color: #FF7F2A;
2101
}
2102

    
2103
div.action_error button.details {
2104
    margin: 5px 0 0 0px;
2105
    padding: 0 15px;
2106
}
2107

    
2108
div.action_error button.details:hover {
2109
    background-color: #FF7F2A;
2110
}
2111

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

    
2120
div#user{
2121
    float:right;
2122
    clear: both;
2123
    color: #FFFFFF;
2124
    font-size: 75%;
2125
    margin-top: 43px;
2126
}
2127

    
2128
div#user a{
2129
    color: #FFFFFF;
2130
    text-decoration: none;
2131
}
2132

    
2133
div#user a.current_lang {
2134
    color: #72ADC8;
2135
}
2136

    
2137
.separator {
2138
    background-color: #74AEC9;
2139
    height: 10px;
2140
    width: 700px;
2141
    font-size: 1px;
2142
    line-height: 0px;
2143
}
2144

    
2145
#disks.separator {
2146
    background-color: #dea842;
2147
}
2148

    
2149
#networks.separator {
2150
    background-color: #6c535d;
2151
}
2152

    
2153
#networks-pane .public-networks .namecontainer {
2154
    margin-top: 4px !important;
2155
}
2156

    
2157
.network-machine h5 {
2158
    margin-bottom: 15px;
2159
    margin-top: 5px;
2160
}
2161

    
2162
.machine-container .separator {
2163
    width: 508px;
2164
    height: 1px;
2165
    margin-top: 2px;
2166
    background-color: #5CA1C0;
2167
    margin-left: 13px;
2168
}
2169

    
2170
.machine h5 {
2171
    margin: -1px 0px 4px 0px;
2172
}
2173

    
2174
.machine h5.namecontainer {
2175
    margin-top: 1px;
2176
}
2177

    
2178
.editbuttons {
2179
    display: block;
2180
    clear: none;
2181
    width: 40px;
2182
    margin-right: 32%;
2183
    padding-top: 2px;
2184
    float: right;
2185
    cursor: pointer;
2186
    position: relative;
2187
    z-index: 1000;
2188
}
2189

    
2190
div.editbuttons div.save:hover, div.editbuttons div.cancel:hover {
2191
    background-color: #84b7d0;
2192
}
2193

    
2194
div.editbuttons div.cancel:hover {
2195
    background-image: url("./cancel-onhover.png");
2196
}
2197

    
2198
.editbuttons .cancel, .editbuttons .save {
2199
    background-repeat: no-repeat;
2200
    color: transparent;
2201
    height: 16px;
2202
    width: 16px;
2203
    float: left;
2204
}
2205

    
2206
.editbuttons .cancel {
2207
    background-image: url("./cancel.png");
2208
    margin-left: 3px;
2209
}
2210

    
2211
.editbuttons .save {
2212
    background-image: url("./save.png");
2213
    margin-left: 1px;
2214
}
2215

    
2216
.editbuttons img {
2217
    float:none !important;
2218
    margin: 0px !important;
2219
}
2220

    
2221
.namecontainer {
2222
    height: 18px;
2223
    margin-top: 9px;
2224
}
2225

    
2226
.nametextbox {
2227
    font-size: 95%;
2228
}
2229

    
2230
.large-spinner {
2231
    background: url("./icons/indicators/large/progress.gif");
2232
    margin-left: 298px;
2233
    margin-top: 20px;
2234
    height: 31px;
2235
    width: 31px;
2236
    position: absolute;
2237
}
2238

    
2239
.list .large-spinner {
2240
    margin-top:-50px;
2241
}
2242

    
2243
.single .large-spinner {
2244
    margin-top:-45px;
2245
}
2246

    
2247
/* tables in list view */
2248
div.list div.dataTables_filter {
2249
    font-size: 75%;
2250
    display: none;
2251
    margin-bottom: 12px;
2252
}
2253

    
2254
div.list div.dataTables_filter input{
2255
    font-size: 100%;
2256
}
2257

    
2258
.dataTables_wrapper {
2259
    width: 515px;
2260
    padding-bottom: 40px;
2261
}
2262

    
2263
div.list table thead .sorting, div.list table thead .sorting_desc, div.list table thead .sorting_asc {
2264
    padding-right: 15px !important;
2265
}
2266

    
2267
div.list table {
2268
    width: 515px;
2269
    font-size: 75%;
2270
}
2271

    
2272
div.list table tbody td {
2273
    color: #3D3D3D;
2274
    padding:6px;
2275
    vertical-align: middle;
2276
}
2277

    
2278
div.list table thead tr th {
2279
    background-color: #CDE2EC;
2280
    background-image: url(bg.gif);
2281
    background-repeat: no-repeat;
2282
    background-position: right 11px;
2283
    font-weight: normal;
2284
    border: 1px solid transparent;
2285
    border-bottom: none;
2286
    padding: 4px;
2287
    text-align: left;
2288
    vertical-align: middle;
2289
    cursor: pointer;
2290
}
2291

    
2292
div.list table thead .sorting_asc, div.list table thead .sorting_desc {
2293
    background-color: #5CA1C0;
2294
}
2295

    
2296
div.list table thead .sorting_asc {
2297
    background-image: url(asc.gif);
2298
}
2299

    
2300
div.list table thead .sorting_desc {
2301
    background-image: url(desc.gif);
2302
}
2303

    
2304
div.list table .selection div.expand-icon {
2305
    background-image: url(asc.gif);
2306
    background-repeat: no-repeat;
2307
    position: relative;
2308
    cursor: pointer;
2309
    width: 15px;
2310
    height: 4px;
2311
    left: 19px;
2312
    top: -11px;
2313
}
2314

    
2315
ul.dropdown-selector {
2316
    background-color: #E6EEEE;
2317
    position: absolute;
2318
    margin-left: 1px;
2319
    display: block;
2320
    top: 255px;
2321
    font-size:75%;
2322
    width:40px;
2323
}
2324

    
2325
ul.dropdown-selector li {
2326
    padding: 4px;
2327
}
2328

    
2329
ul.dropdown-selector li:hover {
2330
    background-color: #5CA1C0;
2331
}
2332

    
2333
ul.dropdown-selector li a{
2334
    color: black;
2335
    text-decoration: none;
2336
}
2337

    
2338
div.list table span.imagetag {
2339
    display: none;
2340
}
2341

    
2342
div.list table thead .vmos {
2343
    width: 20px !important;
2344
    vertical-align:middle;
2345
}
2346

    
2347
div.list table .selection {
2348
    width: 20px !important;
2349
    text-align: left;
2350
    background-image: none;
2351
    padding-left: 6px;
2352
}
2353

    
2354
div.list table thead .vmflavor {
2355
    width: 100px !important;
2356
}
2357

    
2358
div.list table thead .vmgroup {
2359
    width: 40px !important;
2360
}
2361

    
2362
div.list table thead .vmstatus {
2363
    width: 50px !important;
2364
}
2365

    
2366
div.list table thead .vmname {
2367
    width: 70px !important;
2368
}
2369

    
2370
.spinner, .wave {
2371
    clear: right;
2372
    float:right !important;
2373
    margin: 10px 16px 0 15px !important;
2374
}
2375

    
2376
#networks-pane .spinner {
2377
    margin-top: 18px !important;
2378
}
2379

    
2380
.hidden {
2381
    display:none;
2382
}
2383

    
2384
div.actions a.selected, div.actions a.selected:hover, div.machine-actions a.selected, div.machine-actions a.selected:hover {
2385
    display:block !important;
2386
}
2387

    
2388
.action_error .message, .action_error .code {
2389
    display: none;
2390
}
2391

    
2392
.fixed {
2393
    bottom: 0;
2394
    position: fixed !important;
2395
}
2396

    
2397
/* Networks */
2398
#networks-pane {
2399
    background-color: transparent;
2400
    color: black;
2401
    margin-left: 1px;
2402
    margin-right: 0;
2403
}
2404

    
2405
#networkscreate {
2406
    color: black;
2407
    background-color: #FF7F2A;
2408
    cursor: pointer;
2409
    padding: 7px 24px;
2410
    text-decoration: none;
2411
}
2412

    
2413
#networkscreate:hover {
2414
    background-color: #FF9955;
2415
}
2416

    
2417
#networks-pane #beforecreate {
2418
    margin-left: -13px;
2419
    margin-top: -6px;
2420
}
2421

    
2422
#networks-container {
2423
    margin-top: 10px;
2424
    min-height: 270px;
2425
}
2426

    
2427
#networks-createcontainer {
2428
    position: absolute;
2429
    top: 155px;
2430
}
2431

    
2432
#networks-pane .public-networks {
2433
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
2434
    margin: 0 0 18px;
2435
    padding: 70px 0 15px 35px;
2436
}
2437

    
2438
#networks-pane .private-networks {
2439
    background: url("./running-bg.png") repeat scroll 0 0 transparent;
2440
    padding: 15px 20px 20px 35px;
2441
}
2442

    
2443
#public-template, #private-template, #public-machine-template, #private-machine-template {
2444
    display:none;
2445
}
2446

    
2447
div.network a.action-network-add {
2448
    display: none;
2449
}
2450

    
2451
div.network a.action-network-destroy {
2452
    margin-top: 38px !important;
2453
    width: 50px;
2454
    display: none;
2455
}
2456

    
2457
div.network {
2458
    clear: both;
2459
    min-height: 65px;
2460
    margin: 5px 0 0 -30px;
2461
    padding: 3px 20px 0 4px;
2462
    width: 480px;
2463
    position: relative;
2464
}
2465

    
2466
#private-template {
2467
    margin: 2px 0 0 -30px;
2468
}
2469

    
2470
div.network-placeholder {
2471
    margin-left: 33px;
2472
}
2473

    
2474
div.private-networks div.network-placeholder {
2475
    border-left: 3px solid #FB822F;
2476
}
2477

    
2478
div.network-cable {
2479
    border-left: 3px solid #FB822F;
2480
    float: left;
2481
    margin-left: -40px;
2482
    margin-top: -40px;
2483
    height: 185px;
2484
    overflow: hidden;
2485
}
2486

    
2487
.last div.network-cable {
2488
    height:80px !important;
2489
}
2490

    
2491
.first div.network-cable {
2492
    height:165px;
2493
    margin-top:-20px;
2494
}
2495

    
2496
div.firewall-cable {
2497
    border-left: 3px solid #FB822F;
2498
    float: left;
2499
    margin-left: -100px;
2500
    margin-top: -20px;
2501
    height: 110px;
2502
}
2503

    
2504
.last div.firewall-cable {
2505
    display:none;
2506
}
2507

    
2508
div.network a:hover {
2509
    text-decoration: underline;
2510
    cursor: pointer;
2511
}
2512

    
2513
#networks-container .name {
2514
    font-size: 75%;
2515
    margin-bottom: 25px;
2516
    margin-top: -4px;
2517
}
2518

    
2519
div.network-machines, div.firewall {
2520
    font-size: 75%;
2521
}
2522

    
2523
div.machines-header, div.firewall-header {
2524
    cursor: pointer;
2525
}
2526

    
2527
div.network-machines {
2528
    margin-bottom: 0px;
2529
    margin-top: -4px;
2530
}
2531

    
2532
.state {
2533
    float: right;
2534
    position: absolute;
2535
    right: 10px;
2536
    top: 40px;
2537
    font-size: 75%;
2538
}
2539

    
2540
div.network div.actions {
2541
    float: right;
2542
    font-size: 75%;
2543
    font-weight: normal;
2544
    height: 70px;
2545
    width: 100px;
2546
    position: absolute;
2547
    right: -100px;
2548
    top: 0;
2549
}
2550

    
2551
div.network div.machine-actions {
2552
    text-decoration: none;
2553
    float: right;
2554
    width: 100px;
2555
    margin: -5px -100px 0 0;
2556
    font-weight: normal;
2557
    font-size: 75%;
2558
}
2559

    
2560
div.network div.actions a, div.network div.machine-actions a {
2561
    text-decoration: none;
2562
    height: 15px;
2563
    color: transparent;
2564
    display: block;
2565
}
2566

    
2567
div.network div.actions a {
2568
    margin: -2px 0 0 8px;
2569
}
2570

    
2571
div.network div.machine-actions a {
2572
    margin: 0 0 0 8px;
2573
}
2574

    
2575
div.network div.actions a:hover, div.network div.machine-actions a:hover {
2576
    display: block;
2577
    background-color:#A1C8DB;
2578
    width: 200px;
2579
    opacity: 0.8;
2580
    filter: alpha(opacity = 80);
2581
}
2582

    
2583
div.network:hover div.actions a, div.network-machine:hover div.machine-actions a {
2584
    color: black;
2585
}
2586

    
2587
div.network div.actions a.selected, div.network div.machine-actions a.selected {
2588
    color: #FF7F2A !important;
2589
    width: 50px !important;
2590
}
2591

    
2592
div.network div.actions a.selected:hover, div.network div.machine-actions a.selected:hover {
2593
    background-color: transparent;
2594
}
2595

    
2596
div.network div.display a {
2597
    color: black;
2598
    display: block;
2599
}
2600

    
2601
div.network-machine div.machine-actions a.action-details {
2602
    margin-top: 10px;
2603
}
2604

    
2605
div.network:hover {
2606
    background-color: #CDE2EC;
2607
}
2608

    
2609
#internet-separator {
2610
    width: 510px;
2611
    height: 5px;
2612
    background-color: #6C535D;
2613
    margin-left: -36px;
2614
    margin-top: 20px;
2615
}
2616

    
2617
.network-logos {
2618
    float:left;
2619
    padding-right: 10px;
2620
}
2621

    
2622
.network-logos:hover {
2623
    cursor: pointer;
2624
}
2625

    
2626
#networks-container .settings {
2627
    color: #000000;
2628
}
2629

    
2630
#networks-container .network-type {
2631
    float: right;
2632
    margin-top: -4px;
2633
    margin-right: 15px;
2634
}
2635

    
2636
#networks-container .indicator {
2637
    background-color: #87AADE;
2638
    border-color: white;
2639
    border-style: solid;
2640
    border-width: 2px 3px 2px 2px;
2641
}
2642

    
2643
.state div {
2644
    text-align: right;
2645
    margin: 5px 1px -4px;
2646
}
2647

    
2648
.public-networks .state div {
2649
    margin-top: 4px;
2650
}
2651

    
2652
.private-networks .state div {
2653
    margin-top: 9px;
2654
    margin-bottom: -12px;
2655
}
2656

    
2657
div.indicator {
2658
    clear: none;
2659
    float: right;
2660
    height: 11px;
2661
    margin: 3px -1px;
2662
    width: 10px;
2663
}
2664

    
2665
#private-networks {
2666
    margin-top: 20px;
2667
}
2668

    
2669
.private-networks .editbuttons {
2670
    margin-right: 22%;
2671
}
2672

    
2673
.private-networks div.confirm_single {
2674
    margin: 46px -231px 0 0;
2675
    font-size: 80%;
2676
}
2677

    
2678
.private-networks .network-machine div.confirm_single {
2679
    margin: -8px -210px 0 0;
2680
}
2681

    
2682
span.rename-network, span.configure {
2683
    background-repeat: no-repeat;
2684
    color: transparent;
2685
    font-size: 75%;
2686
    font-weight: normal;
2687
    margin-left: 10px;
2688
    padding-left: 10px;
2689
    text-align: left;
2690
}
2691

    
2692
span.rename-network {
2693
    cursor: pointer;
2694
}
2695

    
2696
div.name-div:hover span.rename-network {
2697
    color: #3D3D3D;
2698
    margin-top: 0.4em;
2699
    background-image: url(./pencil.png);
2700
    background-position: 0 3px;
2701
}
2702

    
2703
div.network:hover a.rename {
2704
    color: #3d3d3d;
2705
}
2706

    
2707
.network-separator {
2708
    background-color: #DCDCDC;
2709
    height: 1px;
2710
    margin: 2px 0 0 -5px;
2711
    width: 480px;
2712
    font-size: 4px;
2713
    line-height: 1px;
2714
}
2715

    
2716
.network-contents {
2717
    margin-left: -4px;
2718
    width: 504px;
2719
    clear: both;
2720
    padding-bottom: 7px;
2721
}
2722

    
2723
.network-machine .state div {
2724
    text-align: left;
2725
}
2726

    
2727
.network-machine {
2728
    margin-left: 34px;
2729
    padding-bottom: 5px;
2730
    padding-left: 5px;
2731
    padding-top: 10px;
2732
    margin-top: 5px;
2733
}
2734

    
2735
.network-machine .logo {
2736
    float:left;
2737
    padding-right: 10px;
2738
    position:relative;
2739
}
2740

    
2741
#networks-container .machine-name {
2742
    text-decoration: none !important;
2743
    margin-bottom: 10px;
2744
    color: #000000;
2745
    margin-top: -4px;
2746
}
2747

    
2748
.discreet {
2749
    color: #969696;
2750
}
2751

    
2752
.network-contents-start-separator {
2753
    height: 3px;
2754
    background-color: #87AADE;
2755
    margin-left: 39px;
2756
    width: 410px;
2757
    font-size: 3px;
2758
}
2759

    
2760
.network-contents-end-separator {
2761
    height: 3px;
2762
    background-color: #87AADE;
2763
    margin-top: 7px;
2764
    margin-left: 13px;
2765
    width: 473px;
2766
    font-size: 3px;
2767
}
2768

    
2769
.network .separator {
2770
    background-color: #DCDCDC;
2771
    height: 1px;
2772
    margin-left: 5px;
2773
    margin-top: 5px;
2774
    margin-bottom: -3px;
2775
    position: absolute;
2776
    width: 473px;
2777
}
2778

    
2779
.network-machine .state {
2780
    margin-right: 18px;
2781
}
2782

    
2783
.network-machine .state .status {
2784
    margin-bottom: 4px;
2785
}
2786

    
2787
.machine-name .name {
2788
    margin-top: -10px !important;
2789
}
2790

    
2791
.machine-name .namecontainer {
2792
    line-height: 18px;
2793
    margin-bottom: 20px;
2794
}
2795

    
2796
div.network-machine:hover {
2797
    background-color: #5CA1C0;
2798
}
2799

    
2800
.machines {
2801
    width: 416px;
2802
    margin-bottom: -8px;
2803
    margin-top: 10px;
2804
}
2805

    
2806
div.empty-network-slot {
2807
    height: 60px;
2808
}
2809

    
2810
div.network-remove-machine, div.network-add-machine {
2811
    background-color: #FB822F;
2812
    color: #bc4b00;
2813
    width:90px;
2814
    height:21px;
2815
    float:left;
2816
    margin:40px 0 0 -100px;
2817
}
2818

    
2819
span.remove-icon {
2820
    font-size: 80%;
2821
    margin-left: 15px;
2822
}
2823

    
2824
span.add-icon {
2825
    margin-left: 15px;
2826
}
2827

    
2828
span.remove-icon:hover, span.add-icon:hover {
2829
    cursor:pointer;
2830
    color: #fff;
2831
}
2832

    
2833
div.network-add-machine {
2834
    margin:43px 0 0 -3px;
2835
}
2836

    
2837
.firewall-on {
2838
    color: #42E342;
2839
}
2840

    
2841
.firewall-off {
2842
    color: #F82E2E;
2843
}
2844

    
2845
.firewall-content {
2846
    color: black;
2847
    font-size: 60%;
2848
    margin-left: 60px;
2849
}
2850

    
2851
.firewall-content .checkbox-legends {
2852
    vertical-align: text-top;
2853
}
2854

    
2855
.checkbox-legends a {
2856
    color: black;
2857
    text-decoration: underline;
2858
    font-size: 100%;
2859
}
2860

    
2861
h5.machine-connect {
2862
    font-size: 75%;
2863
}
2864

    
2865
.machine-connect span {
2866
    text-decoration: underline;
2867
}
2868

    
2869
h5.machine-connect span:hover {
2870
    cursor: pointer;
2871
}
2872

    
2873
.firewall-contents-start-separator {
2874
    background-color: #808080;
2875
    height: 2px;
2876
    margin-bottom: 5px;
2877
    width: 365px;
2878
}
2879

    
2880
.firewall-contents-end-separator {
2881
    background-color: #808080;
2882
    height: 2px;
2883
    margin-left: -60px;
2884
    margin-top: 5px;
2885
    width: 425px;
2886
}
2887

    
2888
.firewall-apply {
2889
    background-color: #666666;
2890
    border: medium none;
2891
    float: right;
2892
    font-size: 105%;
2893
    height: 18px;
2894
    margin-right: 5px;
2895
    margin-top: 3px;
2896
    width: 75px;
2897
}
2898

    
2899
.name-div {
2900
    margin-left: 70px;
2901
    margin-bottom: 20px;
2902
}
2903

    
2904
.machine-name-div {
2905
    margin-bottom: 20px;
2906
    margin-left: 60px;
2907
}
2908

    
2909
/* Metadata */
2910

    
2911
.info-content {
2912
    clear: both;
2913
    height: 95px;
2914
    width: 512px;
2915
}
2916

    
2917
.metadata-container {
2918
    line-height: 12px;
2919
    height: 85px;
2920
    background-color: #84b7d0;
2921
}
2922

    
2923
.metadata-column {
2924
    border-right: 1px solid #5CA1C0;
2925
    color: black;
2926
    float: left;
2927
    font-size: 60%;
2928
    margin-top: 3px;
2929
    height: 70px;
2930
    padding-bottom: 5px;
2931
}
2932

    
2933
.vm-stats {
2934
    padding-left: 10px;
2935
    padding-right: 5px;
2936
    width: 119px;
2937
}
2938

    
2939
.vm-details {
2940
    width: 169px;
2941
    margin-left:17px;
2942
}
2943

    
2944
.vm-metadata {
2945
    padding-left: 10px;
2946
    width: 129px;
2947
    border: none;
2948
}
2949

    
2950
.metadata-left {
2951
    float:left;
2952
    width: 50px;
2953
    height: 60px;
2954
}
2955

    
2956
.metadata-right {
2957
    width: 73px;
2958
    float:left;
2959
    height: 35px;
2960
    padding-left: 5px;
2961
    position:relative;
2962
    overflow:hidden;
2963
}
2964

    
2965
.metadata-right .items {
2966
    position:absolute;
2967
    height:20000em;
2968
}
2969

    
2970
.metadata-keys-container {
2971
    height: 60px;
2972
    float: left;
2973
}
2974

    
2975
.single .metadata-keys-container {
2976
    float: none;
2977
    height: 50px;
2978
}
2979

    
2980
.single a.manage-metadata {
2981
    font-size: 80%;
2982
    margin-left:4px;
2983
    color: #383838;
2984
}
2985

    
2986
a.manage-metadata {
2987
    font-size: 100%;
2988
    color: black;
2989
    margin-left:17px;
2990
    text-decoration: underline;
2991
}
2992

    
2993
div.machine a.manage-metadata:hover {
2994
    background-color: transparent;
2995
}
2996

    
2997
.metadata-actions, .scrollable {
2998
    padding-left: 5px;
2999
}
3000

    
3001
.singe .metadata-actions, .single .scrollable {
3002
    font-size: 80%;
3003
    line-height: 12px;
3004
    width: 300px;
3005
}
3006

    
3007
.metadata-actions .prev,  .metadata-actions .next{
3008
    float:left;
3009
    width:29px;
3010
    height:6px;
3011
    cursor: pointer;
3012
}
3013

    
3014
.metadata-actions .prev {
3015
    background: url("./roll-up.png") no-repeat scroll 0 0 transparent;
3016
}
3017

    
3018
.metadata-actions .next {
3019
    background: url("./roll-down.png") no-repeat scroll 0 0 transparent;
3020
}
3021

    
3022
.scrollable {
3023
    position:relative;
3024
    overflow:hidden;
3025
    height: 35px;
3026
    width: 60px;
3027
    margin-bottom:2px;
3028
}
3029

    
3030
.scrollable .items {
3031
    position:absolute;
3032
    height:20000em;
3033
}
3034

    
3035
.metadata-bar {
3036
    float: right !important;
3037
    margin: 1px 7px 0 !important;
3038
}
3039

    
3040
/* single view */
3041
.single {
3042
    color: #383838;
3043
    margin-top: -76px;
3044
    padding-bottom: 10px;
3045
    width: 679px;
3046
}
3047

    
3048
.single .column1 {
3049
    float: left;
3050
    margin: 1px 0 25px 17px;
3051
    width: 140px;
3052
}
3053

    
3054
.single .column1 .state {
3055
    float: left;
3056
    margin-left: 4px;
3057
    padding-bottom: 6px;
3058
    padding-top: 3px;
3059
    position: relative;
3060
    right: 0;
3061
    text-align: center;
3062
    width: 126px;
3063
}
3064

    
3065
.single .column1 .state-label {
3066
    padding-top: 5px;
3067
}
3068

    
3069
.single .column1 .indicators {
3070
    margin-right: 38px !important;
3071
}
3072

    
3073
.single div.connect-arrow {
3074
    margin-left: -17px;
3075
}
3076

    
3077
.single div.connect-border {
3078
    margin-left: -29px;
3079
}
3080

    
3081
.single .single-actions {
3082
    padding-bottom: 4px;
3083
    padding-left: 15px;
3084
    width: 69px;
3085
    float: left;
3086
}
3087

    
3088
.single div.single-action {
3089
    font-size: 80%;
3090
    line-height: 18px;
3091
    text-decoration: none;
3092
    cursor: pointer;
3093
}
3094

    
3095
.single div.single-action:hover {
3096
    background-color:#A1C8DB;
3097
    width: 180px;
3098
    opacity: 0.8;
3099
    filter: alpha(opacity = 80);
3100
}
3101

    
3102
.single div.single-action.selected {
3103
    color: #FF7F2A !important;
3104
    width: 50px !important;
3105
}
3106

    
3107
.single div.single-action.selected:hover {
3108
    background-color:transparent;
3109
}
3110

    
3111
div.single div.action-container.destroy {
3112
}
3113

    
3114
.single div.confirm_single {
3115
    font-size: 80%;
3116
    margin: -19px -115px 0 0;
3117
}
3118

    
3119
.single div.action-container.destroy div.confirm_single {
3120
    margin: -18px -116px 0 0;
3121
    position: relative;
3122
    left: 0px;
3123
}
3124

    
3125
.single div.confirm_single button.no {
3126
    margin-left: -5px;
3127
}
3128

    
3129
.single .spinner, .single .wave {
3130
    margin: 5px 50px 0 0px !important
3131
}
3132

    
3133
.single div.action_error {
3134
    margin: 2px 0px 0 605px !important;
3135
    position: relative;
3136
}
3137

    
3138
.single .column2 {
3139
    background-color: #A1C8DB;
3140
    float: left;
3141
    font-size: 78%;
3142
    line-height: 17px;
3143
    margin: 0 0 20px 5px;
3144
    width: 358px;
3145
}
3146

    
3147
.single .column2 .machine-labels {
3148
    float: left;
3149
    font-size: 90%;
3150
    margin-left: 10px;
3151
    margin-top: 10px;
3152
    width: 125px;
3153
}
3154

    
3155
.single .column2 .machine-details {
3156
    float: right;
3157
    text-align: right;
3158
    font-size: 90%;
3159
    width: 210px;
3160
    margin-right: 10px;
3161
    margin-top: 10px;
3162
}
3163

    
3164
.single .column2 .name, .single .column2 .disk, .single .column2 .image-size, .single .column2 .ipv6 {
3165
    margin-bottom: 13px;
3166
}
3167

    
3168
.single .tags {
3169
    clear: both;
3170
    margin-bottom: 10px;
3171
    margin-left: 10px;
3172
}
3173

    
3174
.single .tags-label {
3175
    float: left;
3176
    padding: 0 5px;
3177
    width: 30px;
3178
}
3179

    
3180
.single .tags-down-arrow {
3181
    background: url("/static/tags-down-arrow.png") no-repeat scroll 1px 7px transparent;
3182
    float: left;
3183
    height: 16px;
3184
    width: 9px;
3185
}
3186

    
3187
.single .tags-header {
3188
    background-color: #84B7D0;
3189
    cursor: pointer;
3190
    height: 16px;
3191
    width: 55px;
3192
}
3193

    
3194
.single .tags-content {
3195
    background-color: #84B7D0;
3196
    clear: both;
3197
    height: 65px;
3198
    padding-bottom: 5px;
3199
    padding-top: 5px;
3200
    width: 300px;
3201
}
3202

    
3203
.single .column3 {
3204
    background-color: #A1C8DB;
3205
    margin-left: 535px;
3206
    position: absolute;
3207
    top: 280px;
3208
    width: 150px;
3209
    overflow: visible;
3210
    padding-bottom: 10px;
3211
}
3212

    
3213
.single .column3 .controls {
3214
    font-size: 80%;
3215
    height: 20px;
3216
    padding-left: 7px;
3217
    padding-right: 7px;
3218
    padding-top: 8px;
3219
}
3220

    
3221
.single .column3 .previous {
3222
    float:left;
3223
    width: 72px;
3224
}
3225

    
3226
.single .column3 .next {
3227
    float: right;
3228
    text-align: center;
3229
    width: 60px;
3230
}
3231

    
3232
.single .column3 .next-label {
3233
    float: right;
3234
    margin-right: 3px;
3235
    margin-top: -2px;
3236
}
3237

    
3238
.single .column3 .next-arrow {
3239
    float: right;
3240
    height: 18px;
3241
    width: 10px;
3242
    background: url("./right-arrow.png") no-repeat scroll 3px 2px transparent;
3243
}
3244

    
3245
.single .column3 .prev-label {
3246
    float: left;
3247
    margin-left: 3px;
3248
    margin-top: -2px;
3249
}
3250

    
3251
.single .column3 .prev-arrow {
3252
    background: url("./left-arrow.png") no-repeat scroll 3px 2px transparent;
3253
    float: left;
3254
    height: 18px;
3255
    width: 10px;
3256
}
3257

    
3258
.single .column3 .separator {
3259
    width: 135px;
3260
    height: 1px;
3261
    background-color: #84B7D0;
3262
    margin: 0 0 0 7px;
3263
    clear: both;
3264
}
3265

    
3266
.single .column3 .servers {
3267
    font-size: 80%;
3268
    line-height: 15px;
3269
    padding-top: 10px;
3270
    text-align: right;
3271
    overflow: visible;
3272
    position: relative;
3273
}
3274

    
3275
.single .column3 .server-name {
3276
    margin-left: 10px;
3277
    padding-right: 5px;
3278
    cursor: pointer;
3279
    padding-bottom: 2px;
3280
}
3281

    
3282
div.single div.column3 div.server-name:hover, .single .column3 .column3-selected {
3283
    background-color: #84B7D0;
3284
    color: white;
3285
    opacity: 0.8;
3286
    padding-left: 9px;
3287
    text-align: left;
3288
    width: 160px;
3289
    filter: alpha(opacity = 80);
3290
    position: relative;
3291
}
3292

    
3293
.single .toggler {
3294
    color: #FFFFFF;
3295
    float: right;
3296
    font-size: 140%;
3297
}
3298

    
3299
.single .single-cpu, .single .single-network {
3300
    float: left;
3301
    height: 100px;
3302
    width: 48%;
3303
}
3304

    
3305
.single .cpu-usage, .single .network-usage {
3306
    padding-bottom: 15px;
3307
    padding-left: 20px;
3308
    padding-top: 15px;
3309
    font-size: 90%;
3310
}
3311

    
3312
.single .cpu-graph, .single .network-graph {
3313
    background-color: #A1C8DB;
3314
    height: 210px;
3315
    margin-left: 20px;
3316
    width: 300px;
3317
}
3318

    
3319
.single .single-image {
3320
    width: 126px;
3321
    margin-bottom: 10px;
3322
    margin-left: 4px;
3323
}
3324

    
3325
.single .column3 .previous, .single .column3 .next {
3326
    cursor: pointer;
3327
    background-color: #84B7D0;
3328
    color: white;
3329
    font-size: 100%;
3330
    height: 15px;
3331
    padding-top: 2px;
3332
}
3333

    
3334
.single .column3 .disabled {
3335
    opacity: 0.5;
3336
    filter: alpha(opacity = 50);
3337
}
3338

    
3339
.single div.lower {
3340
    clear:both;
3341
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
3342
    width: 700px;
3343
    height: 270px;
3344
}
3345

    
3346
.single div.upper {
3347
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
3348
    margin-bottom: 10px;
3349
    min-height: 310px;
3350
    overflow-x: visible;
3351
    overflow-y: auto;
3352
    padding-top: 60px;
3353
    width: 700px;
3354
}
3355

    
3356
/* console css */
3357
.console-header-logo {
3358
    padding-top: 10px;
3359
    margin-left: 30px;
3360
    position: fixed;
3361
}
3362

    
3363
div.console-container {
3364
    margin: 0 0em;
3365
    height: auto;
3366
}
3367

    
3368
#wrapper.console {
3369
    width: auto;
3370
}
3371

    
3372
.console-info {
3373
    font-size:80%;
3374
    color: white;
3375
    float:left;
3376
    position:relative;
3377
    margin: 25px 0 0 480px;
3378
}
3379

    
3380
applet {
3381
    width: 100%;
3382
    height:75%;
3383
}
3384

    
3385
.console-footer #footer-text{
3386
    float:left;
3387
    left: auto;
3388
    margin-left:30px;
3389
}
3390

    
3391
/* add network wizard (see also #wizard for shared classes) */
3392
#networks-wizard .header {
3393
    background-color: #4085A5;
3394
    height: 56px;
3395
}
3396

    
3397
#networks-wizard div.name-input {
3398
    margin: 75px 0 0 55px;
3399
}
3400

    
3401
#networks-wizard input {
3402
    border: 1px solid #CCCCCC;
3403
    color: #445566;
3404
    letter-spacing: 1px;
3405
    width: 170px;
3406
}
3407

    
3408
#networks-wizard span.help {
3409
    font-style: italic;
3410
    font-size: 80%;
3411
    margin-left: 10px;
3412
}
3413

    
3414
#networks-wizard .separator-end {
3415
    background-color: #387693;
3416
    height: 6px;
3417
    width: 479px;
3418
    margin-left: -13px;
3419
    margin-top: 22px;
3420
}
3421

    
3422
.red {
3423
    color: red;
3424
}
3425

    
3426
/* add server to network wizard (see also #metadata-wizard for shared classes) */
3427
#add-machines-wizard span.machine-name {
3428
    margin-left: 4px;
3429
    vertical-align: text-top;
3430
}
3431

    
3432
#add-machines-wizard img.list-logo {
3433
    margin: 2px 1px 1px;
3434
}
3435

    
3436
.css-panes {
3437
    clear: both;
3438
}
3439

    
3440
.last .firewall-content {
3441
    margin-bottom:13px;
3442
}
3443

    
3444
#pub:hover .last .network-separator {
3445
    background-color: #CDE2EC;
3446
}
3447

    
3448
.public-networks .empty-network-slot {
3449
    display: none;
3450
}