Statistics
| Branch: | Tag: | Revision:

root / ui / static / main.css @ a6121c1c

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: -20px;
222
    margin-top: -6px;
223
    width: 20px;
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
    min-height: 50px;
909
    padding-top: 60px;
910
}
911

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

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

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

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

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

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

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

    
940
.destroying-state .indicator1, .destroying-state .indicator2, .destroying-state .indicator3, .destroying-state .indicator4 {
941
    background-color: #666666;
942
}
943

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

    
948
.build-state .indicator1, .build-state .indicator2, .build-state .indicator3, .build-state .indicator4 {
949
    background-color: #87AADE;
950
}
951

    
952
.network-indicator .indicator1, .network-indicator .indicator2, .network-indicator .indicator3, .network-indicator .indicator4 {
953
    background-color: #87AADE;
954
}
955

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

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

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

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

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

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

    
1000
div.machine div.info-label.darker {
1001
    background-color: #5CA1C0;
1002
}
1003

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

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

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

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

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

    
1036
button.next {
1037
    background-color: #4085A5;
1038
    border-color: #4085A5;
1039
    text-align: right;
1040
}
1041

    
1042
button.next:hover {
1043
    background-color: #7DB4CD;
1044
    border-color: #7DB4CD;
1045
}
1046

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

    
1054
button.prev:hover {
1055
    background-color: #7DB4CD;
1056
    border-color: #7DB4CD;
1057
}
1058

    
1059
.image-logo {
1060
    float: left;
1061
    margin-right: 1em;
1062
    margin-left: 1.5em;
1063
    margin-top: 4px;
1064
}
1065

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

    
1074
#ie-fix-view-select {
1075
    position: relative;
1076
    z-index: 1000;
1077
}
1078

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

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

    
1097
div#view-select a {
1098
    color:#5f8dd3;
1099
}
1100

    
1101
a#list:hover {
1102
    background: #5f8dd3;
1103
}
1104

    
1105
a#standard:active, a#list:active {
1106
    color:white;
1107
}
1108

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

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

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

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

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

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

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

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

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

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

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

    
1156
.machine-type .active {
1157
    color: #FFFFFF
1158
}
1159

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

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

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

    
1179
#machinesview_content {
1180
    display:none;
1181
}
1182

    
1183
.list-machines {
1184
    min-width: 515px;
1185
}
1186

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

    
1196
#welcomeheader {
1197
    color:white;
1198
    text-align: center;
1199
}
1200

    
1201
.welcomebody {
1202
    color: white;
1203
    font-size:80%;
1204
}
1205

    
1206
.welcomebody a {
1207
    color: white;
1208
}
1209

    
1210
.welcomefooter {
1211
    color: white;
1212
    font-size:60%;
1213
}
1214

    
1215
.welcomefooter a {
1216
    color: white;
1217
}
1218

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

    
1229
.emptycreate {
1230
    margin: 20px 10px 5px 0 !important;
1231
}
1232

    
1233
#createbody {
1234
    display:none;
1235
    font-size: 80%;
1236
}
1237

    
1238
div.list label img {
1239
    margin: 5px 5px -3px 0;
1240
}
1241

    
1242
div.list label {
1243
    color: #3D3D3D;
1244
    font-size: 75%;
1245
}
1246

    
1247
div.list .state {
1248
    margin-top: 7px;
1249
    margin-right: 10px;
1250
}
1251

    
1252
div.list table tbody {
1253
    margin-top: 8px;
1254
}
1255

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

    
1260
/* root element for tabs  */
1261
#wizard ul.tabs {
1262
    margin-right: -1px;
1263
    float: right;
1264
}
1265

    
1266
#wizard div.panes {
1267
    height: 247px;
1268
    clear:both;
1269
    margin-top: 3px;
1270
}
1271

    
1272
.typebody {
1273
    font-size: 80%;
1274
    font-weight: normal;
1275
    position: relative;
1276
    top: -3px;
1277
}
1278

    
1279
.typehover {
1280
    color: #FFFFFF;
1281
}
1282

    
1283
#label-name {
1284
    margin-top: 10px;
1285
}
1286

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

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

    
1310
#wizard ul.tabs a:hover {
1311
    color: #FFFFFF;
1312
    background-color:#4085A5;
1313
}
1314

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

    
1322
#wizard #standard-images {
1323
    background-color: #ECF4F8;
1324
}
1325

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

    
1336
div.list div.actions a {
1337
    clear: left;
1338
    color: #D3D3D3;
1339
    display: block;
1340
    font-size:75%;
1341
    margin-bottom: 2px;
1342
}
1343

    
1344
div.list div.actions a:hover {
1345
    background-color: transparent;
1346
}
1347

    
1348
div.list div.actions a.enabled {
1349
    color: #3D3D3D;
1350
}
1351

    
1352
div.list div.actions a.enabled:hover{
1353
    cursor: pointer;
1354
    color: black;
1355
    text-decoration: underline;
1356
}
1357

    
1358
div.list div.actions a.selected {
1359
    color: #FF7F2A !important;
1360
}
1361

    
1362
input.machine {
1363
    width: 13px;
1364
    height: 13px;
1365
    top: -1px;
1366
    overflow: hidden;
1367
}
1368

    
1369
.description-container {
1370
    display: inline-block;
1371
    position: relative;
1372
    width: 300px;
1373
}
1374

    
1375
#wizard .button-container {
1376
    height: 20px;
1377
}
1378

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

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

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

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

    
1422
#metadata-wizard .popup-title {
1423
    padding-bottom: 0px;
1424
    font-size: 120%;
1425
}
1426

    
1427
#metadata-wizard .name-container {
1428
    display: inline-block;
1429
}
1430

    
1431
#add-machines-wizard .network-name {
1432
    padding-left: 5px;
1433
}
1434

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

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

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

    
1464
#metadata-wizard .metadata-pair-template {
1465
    height: 15px;
1466
    padding-top: 2px;
1467
    width: 350px;
1468
}
1469

    
1470
#metadata-wizard div.metadata-pair-template:hover {
1471
    background-color: #74AEC9;
1472
}
1473

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

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

    
1488
#metadata-wizard .large-spinner, #add-machines-wizard .large-spinner {
1489
    display: block;
1490
    margin: 50px 0 0 185px;
1491
}
1492

    
1493
#metadata-wizard .metadata-key {
1494
    float: left;
1495
    width: 110px;
1496
    padding-left: 5px;
1497
}
1498

    
1499
#metadata-wizard .metadata-value {
1500
    width: auto;
1501
}
1502

    
1503
#metadata-wizard .metadata-add-template {
1504
    background-color: #74AEC9;
1505
    width: 350px;
1506
}
1507

    
1508
#metadata-wizard #add-meta-value {
1509
    margin-left: 25px;
1510
    width: 150px;
1511
}
1512

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

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

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

    
1542
#metadata-wizard button.save:hover, #add-machines-wizard button.cancel:hover {
1543
    background-color: #7DB4CD;
1544
    border-color: #7DB4CD;
1545
}
1546

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

    
1554
#metadata-wizard button.create:hover, #add-machines-wizard button.add:hover {
1555
    background-color: #FF9651;
1556
    border-color: #FF9651;
1557
}
1558

    
1559
#metadata-wizard .editbuttons {
1560
    margin-top: 4px;
1561
    margin-right: 0;
1562
}
1563

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

    
1572
#metadata-wizard h3, #add-machines-wizard h3 {
1573
    font-weight:normal;
1574
}
1575

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

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

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

    
1605
.metadata-pair-template .editbuttons {
1606
    margin-top: -19px !important;
1607
    margin-right: -2px !important;
1608
}
1609

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

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

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

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

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

    
1641
#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 {
1642
    background-color: #4287a7;
1643
}
1644

    
1645
#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 {
1646
    background-color: #74AEC9;
1647
}
1648

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

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

    
1665
#metadata-wizard p, #add-machines-wizard p {
1666
    margin-left: 7px;
1667
    width: 200px;
1668
}
1669

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

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

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

    
1691
#metadata-wizard input {
1692
    font-style: italic;
1693
    color: #ccc;
1694
}
1695

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

    
1705
#metadata-wizard input {
1706
    font-size: 80%;
1707
}
1708

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

    
1717
#metadata-wizard textarea.value {
1718
    width: 267px;
1719
    height: 170px;
1720
    overflow: auto;
1721
}
1722

    
1723
#metadata-wizard .input-enabled {
1724
    color: black;
1725
    text-align: left;
1726
    font-style: normal;
1727
}
1728

    
1729
#metadata-wizard label.meta-value {
1730
    vertical-align: top;
1731
}
1732

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

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

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

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

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

    
1783
#metadata-wizard ul li:hover {
1784
    background-color: #efefef;
1785
    cursor: pointer;
1786
}
1787

    
1788
#metadata-wizard .dropdownitem {
1789
    margin-left: 10px;
1790
}
1791

    
1792
#metadata-wizard #txtdropdown:focus {
1793
    outline: 0 none;
1794
}
1795

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

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

    
1810
#yes-no p, #yes-no button {
1811
    margin-top: 15px;
1812
}
1813

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

    
1822
#error-success p {
1823
    margin-top: 5px;
1824
}
1825

    
1826
#error-success strong {
1827
    color: #F49C1A;
1828
}
1829

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

    
1840
.popup-header-error {
1841
    background-color: #800000 !important;
1842
}
1843

    
1844
.popup-border-error {
1845
    border-color: #800000 !important;
1846
}
1847

    
1848
.popup-details-error {
1849
    border: none !important;
1850
}
1851

    
1852
.popup-separator-error {
1853
    margin-bottom: 5px !important;
1854
}
1855

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

    
1870

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

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

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

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

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

    
1915
#error-success.success .machine-now-building {
1916
    padding-bottom: 14px !important;
1917
}
1918

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

    
1926
#error-success .password-header {
1927
    margin-bottom: 5px;
1928
}
1929

    
1930
#error-success .password {
1931
    color: #447821;
1932
}
1933

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

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

    
1948
#error-success.success .popup-separator {
1949
    margin-bottom: 14px !important;
1950
}
1951

    
1952

    
1953
#error-success .write-password {
1954
    margin-bottom: 5px;
1955
    padding-left: 30px;
1956
}
1957

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

    
1966
#error-success .write-password-details {
1967
    font-size: 75%;
1968
}
1969

    
1970
.more-details {
1971
    display: block;
1972
}
1973

    
1974
.popup-details a:link, .popup-details a:visited{
1975
    color: black;
1976
}
1977

    
1978
/* Confirmation boxes */
1979
div.confirm_single, div.confirm_multiple, div.action_error {
1980
    display: none;
1981
    color: black;
1982
}
1983

    
1984
div.action-container.destroy div.confirm_single {
1985
    margin-top: -5px;
1986
}
1987

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

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

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

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

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

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

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

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

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

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

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

    
2052
div.confirm_multiple button.yes {
2053
    border-color: #FF7F2A;
2054
    padding: 0 12px;
2055
}
2056

    
2057
div.confirm_multiple button.yes:hover {
2058
    background-color: #FF7F2A;
2059
}
2060

    
2061
div.confirm_multiple button.no {
2062
    padding: 0px 16px;
2063
}
2064

    
2065
div.confirm_multiple button.no:hover {
2066
    background-color: #5CA1C0;
2067
}
2068

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

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

    
2091
div.action_error button.details {
2092
    margin: 5px 0 0 0px;
2093
    padding: 0 15px;
2094
}
2095

    
2096
div.action_error button.details:hover {
2097
    background-color: #FF7F2A;
2098
}
2099

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

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

    
2116
div#user a{
2117
    color: #FFFFFF;
2118
    text-decoration: none;
2119
}
2120

    
2121
div#user a.current_lang {
2122
    color: #72ADC8;
2123
}
2124

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

    
2133
#disks.separator {
2134
    background-color: #dea842;
2135
}
2136

    
2137
#networks.separator {
2138
    background-color: #6c535d;
2139
}
2140

    
2141
#networks-pane .public-networks .namecontainer {
2142
    margin-top: 4px !important;
2143
}
2144

    
2145
.network-machine h5 {
2146
    margin-bottom: 15px;
2147
    margin-top: 5px;
2148
}
2149

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

    
2160
.machine h5 {
2161
    margin: -1px 0px 4px 0px;
2162
}
2163

    
2164
.machine h5.namecontainer {
2165
    margin-top: 5px;
2166
}
2167

    
2168
.editbuttons {
2169
    display: block;
2170
    clear: none;
2171
    width: 40px;
2172
    margin-right: 32%;
2173
    padding-top: 2px;
2174
    float: right;
2175
    cursor: pointer;
2176
}
2177

    
2178
div.editbuttons div.save:hover, div.editbuttons div.cancel:hover {
2179
    background-color: #84b7d0;
2180
}
2181

    
2182
div.editbuttons div.cancel:hover {
2183
    background-image: url("./cancel-onhover.png");
2184
}
2185

    
2186
.editbuttons .cancel, .editbuttons .save {
2187
    background-repeat: no-repeat;
2188
    color: transparent;
2189
    height: 16px;
2190
    width: 16px;
2191
    float: left;
2192
}
2193

    
2194
.editbuttons .cancel {
2195
    background-image: url("./cancel.png");
2196
    margin-left: 3px;
2197
}
2198

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

    
2204
.editbuttons img {
2205
    float:none !important;
2206
    margin: 0px !important;
2207
}
2208

    
2209
.namecontainer {
2210
    height: 18px;
2211
    margin-top: 9px;
2212
}
2213

    
2214
.nametextbox {
2215
    font-size: 95%;
2216
}
2217

    
2218
.large-spinner {
2219
    background: url("./icons/indicators/large/progress.gif");
2220
    margin-left: 298px;
2221
    margin-top: 20px;
2222
    height: 31px;
2223
    width: 31px;
2224
    position: absolute;
2225
}
2226

    
2227
.list .large-spinner {
2228
    margin-top:-50px;
2229
}
2230

    
2231
.single .large-spinner {
2232
    margin-top:-45px;
2233
}
2234

    
2235
/* tables in list view */
2236
div.list div.dataTables_filter {
2237
    font-size: 75%;
2238
    display: none;
2239
    margin-bottom: 12px;
2240
}
2241

    
2242
div.list div.dataTables_filter input{
2243
    font-size: 100%;
2244
}
2245

    
2246
.dataTables_wrapper {
2247
    width: 515px;
2248
    padding-bottom: 40px;
2249
}
2250

    
2251
div.list table thead .sorting, div.list table thead .sorting_desc, div.list table thead .sorting_asc {
2252
    padding-right: 15px !important;
2253
}
2254

    
2255
div.list table {
2256
    width: 515px;
2257
    font-size: 75%;
2258
}
2259

    
2260
div.list table tbody td {
2261
    color: #3D3D3D;
2262
    padding:6px;
2263
    vertical-align: middle;
2264
}
2265

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

    
2280
div.list table thead .sorting_asc, div.list table thead .sorting_desc {
2281
    background-color: #5CA1C0;
2282
}
2283

    
2284
div.list table thead .sorting_asc {
2285
    background-image: url(asc.gif);
2286
}
2287

    
2288
div.list table thead .sorting_desc {
2289
    background-image: url(desc.gif);
2290
}
2291

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

    
2303
ul.dropdown-selector {
2304
    background-color: #E6EEEE;
2305
    position: absolute;
2306
    margin-left: 1px;
2307
    display: block;
2308
    top: 255px;
2309
    font-size:75%;
2310
    width:40px;
2311
}
2312

    
2313
ul.dropdown-selector li {
2314
    padding: 4px;
2315
}
2316

    
2317
ul.dropdown-selector li:hover {
2318
    background-color: #5CA1C0;
2319
}
2320

    
2321
ul.dropdown-selector li a{
2322
    color: black;
2323
    text-decoration: none;
2324
}
2325

    
2326
div.list table span.imagetag {
2327
    display: none;
2328
}
2329

    
2330
div.list table thead .vmos {
2331
    width: 20px !important;
2332
    vertical-align:middle;
2333
}
2334

    
2335
div.list table .selection {
2336
    width: 20px !important;
2337
    text-align: left;
2338
    background-image: none;
2339
    padding-left: 6px;
2340
}
2341

    
2342
div.list table thead .vmflavor {
2343
    width: 100px !important;
2344
}
2345

    
2346
div.list table thead .vmgroup {
2347
    width: 40px !important;
2348
}
2349

    
2350
div.list table thead .vmstatus {
2351
    width: 50px !important;
2352
}
2353

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

    
2358
.spinner, .wave {
2359
    clear: right;
2360
    float:right !important;
2361
    margin: 1px 16px 0 15px !important;
2362
}
2363

    
2364
#networks-pane .spinner {
2365
    margin-top: 18px !important;
2366
}
2367

    
2368
.hidden {
2369
    display:none;
2370
}
2371

    
2372
div.actions a.selected, div.actions a.selected:hover, div.machine-actions a.selected, div.machine-actions a.selected:hover {
2373
    display:block !important;
2374
}
2375

    
2376
.action_error .message, .action_error .code {
2377
    display: none;
2378
}
2379

    
2380
.fixed {
2381
    bottom: 0;
2382
    position: fixed !important;
2383
}
2384

    
2385
/* Networks */
2386
#networks-pane {
2387
    background-color: transparent;
2388
    color: black;
2389
    margin-left: 1px;
2390
    margin-right: 0;
2391
}
2392

    
2393
#networkscreate {
2394
    color: black;
2395
    background-color: #FF7F2A;
2396
    cursor: pointer;
2397
    padding: 7px 24px;
2398
    text-decoration: none;
2399
}
2400

    
2401
#networkscreate:hover {
2402
    background-color: #FF9955;
2403
}
2404

    
2405
#networks-pane #beforecreate {
2406
    margin-left: -20px;
2407
    margin-top: -6px;
2408
}
2409

    
2410
#networks-container {
2411
    margin-top: 10px;
2412
    min-height: 270px;
2413
}
2414

    
2415
#networks-createcontainer {
2416
    position: absolute;
2417
    top: 155px;
2418
}
2419

    
2420
#networks-pane .public-networks {
2421
    background: url("./running-bg.png") repeat scroll 0 0 transparent;
2422
    margin: 0 0 18px;
2423
    padding: 70px 0 15px 35px;
2424
}
2425

    
2426
#networks-pane .private-networks {
2427
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
2428
    padding: 15px 20px 20px 35px;
2429
}
2430

    
2431
#public-template, #private-template, #public-machine-template, #private-machine-template {
2432
    display:none;
2433
}
2434

    
2435
div.network a.action-network-add {
2436
    display: none;
2437
}
2438

    
2439
div.network a.action-network-destroy {
2440
    margin-top: 38px !important;
2441
    width: 50px;
2442
    display: none;
2443
}
2444

    
2445
div.network {
2446
    clear: both;
2447
    min-height: 65px;
2448
    margin: 5px 0 0 -30px;
2449
    padding: 3px 20px 0 4px;
2450
    width: 480px;
2451
    position: relative;
2452
}
2453

    
2454
#private-template {
2455
    margin: 2px 0 0 -30px;
2456
}
2457

    
2458
div.network-placeholder {
2459
    border-left: 3px solid #FB822F;
2460
    margin-left: 33px;
2461
}
2462

    
2463
div.network a:hover, span.show-machines:hover, span.ip:hover, span.show-firewall:hover {
2464
    text-decoration: underline;
2465
    cursor: pointer;
2466
}
2467

    
2468
#networks-container .name {
2469
    font-size: 75%;
2470
    margin-bottom: 25px;
2471
    margin-top: -4px;
2472
}
2473

    
2474
h5.network-machines, h5.machine-settings {
2475
    font-size: 75%;
2476
}
2477

    
2478
.state {
2479
    float: right;
2480
    position: absolute;
2481
    right: 10px;
2482
    top: 40px;
2483
    font-size: 75%;
2484
}
2485

    
2486
div.network div.actions {
2487
    float: right;
2488
    width: 100px;
2489
    font-size: 75%;
2490
    margin:0px -120px 0 0;
2491
    font-weight: normal;
2492
}
2493

    
2494
div.network div.machine-actions {
2495
    text-decoration: none;
2496
    float: right;
2497
    width: 100px;
2498
    margin: -5px -100px 0 0;
2499
    font-weight: normal;
2500
    font-size: 75%;
2501
}
2502

    
2503
div.network div.actions a, div.network div.machine-actions a {
2504
    text-decoration: none;
2505
    height: 15px;
2506
    color: transparent;
2507
    display: block;
2508
}
2509

    
2510
div.network div.actions a {
2511
    margin: -2px 0 0 8px;
2512
}
2513

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

    
2518
div.network div.actions a:hover, div.network div.machine-actions a:hover {
2519
    display: block;
2520
    background-color:#A1C8DB;
2521
    width: 200px;
2522
    opacity: 0.8;
2523
    filter: alpha(opacity = 80);
2524
}
2525

    
2526
div.network:hover div.actions a, div.network-machine:hover div.machine-actions a {
2527
    color: black;
2528
}
2529

    
2530
div.network div.actions a.selected, div.network div.machine-actions a.selected {
2531
    color: #FF7F2A !important;
2532
    width: 50px !important;
2533
}
2534

    
2535
div.network div.actions a.selected:hover, div.network div.machine-actions a.selected:hover {
2536
    background-color: transparent;
2537
}
2538

    
2539
div.network div.display a {
2540
    color: black;
2541
    display: block;
2542
}
2543

    
2544
div.network-machine div.machine-actions a.action-details {
2545
    margin-top: 10px;
2546
}
2547

    
2548
div.network:hover {
2549
    background-color: #CDE2EC;
2550
}
2551

    
2552
#internet-separator {
2553
    width: 510px;
2554
    height: 5px;
2555
    background-color: #6C535D;
2556
    margin-left: -36px;
2557
    margin-top: 20px;
2558
}
2559

    
2560
.network-logos {
2561
    float:left;
2562
    padding-right: 10px;
2563
}
2564

    
2565
.network-logos:hover {
2566
    cursor: pointer;
2567
}
2568

    
2569
#networks-container .settings {
2570
    color: #000000;
2571
}
2572

    
2573
#networks-container .network-type {
2574
    float: right;
2575
    margin-top: -4px;
2576
    margin-right: 15px;
2577
}
2578

    
2579
#networks-container .indicator {
2580
    background-color: #87AADE;
2581
    border-color: white;
2582
    border-style: solid;
2583
    border-width: 2px 3px 2px 2px;
2584
}
2585

    
2586
.state div {
2587
    text-align: right;
2588
    margin: 5px 1px 4px;
2589
}
2590

    
2591
.public-networks .state div {
2592
    margin-top: 4px;
2593
}
2594

    
2595
.private-networks .state div {
2596
    margin-top: 9px;
2597
    margin-bottom: -12px;
2598
}
2599

    
2600
div.indicator {
2601
    clear: none;
2602
    float: right;
2603
    height: 11px;
2604
    margin: 3px -1px;
2605
    width: 10px;
2606
}
2607

    
2608
#private-networks {
2609
    margin-top: 20px;
2610
}
2611

    
2612
.private-networks .editbuttons {
2613
    margin-right: 22%;
2614
}
2615

    
2616
.private-networks div.confirm_single {
2617
    margin: 46px -231px 0 0;
2618
    font-size: 80%;
2619
}
2620

    
2621
.private-networks .network-machine div.confirm_single {
2622
    margin: -8px -210px 0 0;
2623
}
2624

    
2625
span.rename-network, span.configure {
2626
    background-repeat: no-repeat;
2627
    color: transparent;
2628
    font-size: 75%;
2629
    font-weight: normal;
2630
    margin-left: 10px;
2631
    padding-left: 10px;
2632
    text-align: left;
2633
}
2634

    
2635
span.rename-network {
2636
    cursor: pointer;
2637
}
2638

    
2639
div.name-div:hover span.rename-network {
2640
    color: #3D3D3D;
2641
    margin-top: 0.4em;
2642
    background-image: url(./pencil.png);
2643
    background-position: 0 3px;
2644
}
2645

    
2646
div.network:hover a.rename {
2647
    color: #3d3d3d;
2648
}
2649

    
2650
.network-separator {
2651
    background-color: #DCDCDC;
2652
    height: 1px;
2653
    margin: 2px 0 0 -5px;
2654
    width: 480px;
2655
    font-size: 4px;
2656
    line-height: 1px;
2657
}
2658

    
2659
.network-contents {
2660
    margin-left: -4px;
2661
    width: 504px;
2662
    clear: both;
2663
    padding-bottom: 7px;
2664
}
2665

    
2666
.network-machine .state div {
2667
    text-align: left;
2668
}
2669

    
2670
.network-machine {
2671
    margin-left: 34px;
2672
    padding-bottom: 5px;
2673
    padding-left: 5px;
2674
    padding-top: 10px;
2675
    margin-top: 5px;
2676
}
2677

    
2678
.network-machine .logo {
2679
    float:left;
2680
    padding-right: 10px;
2681
    position:relative;
2682
}
2683

    
2684
#networks-container .machine-name {
2685
    text-decoration: none !important;
2686
    margin-bottom: 10px;
2687
    color: #000000;
2688
    margin-top: -4px;
2689
}
2690

    
2691
.discreet {
2692
    color: #969696;
2693
}
2694

    
2695
.network-contents-start-separator {
2696
    height: 3px;
2697
    background-color: #87AADE;
2698
    margin-left: 39px;
2699
    width: 410px;
2700
    font-size: 3px;
2701
}
2702

    
2703
.network-contents-end-separator {
2704
    height: 3px;
2705
    background-color: #87AADE;
2706
    margin-top: 7px;
2707
    margin-left: 13px;
2708
    width: 473px;
2709
    font-size: 3px;
2710
}
2711

    
2712
.network .separator {
2713
    background-color: #DCDCDC;
2714
    height: 1px;
2715
    margin-left: 5px;
2716
    margin-top: 5px;
2717
    margin-bottom: -3px;
2718
    position: absolute;
2719
    width: 473px;
2720
}
2721

    
2722
.network-machine .state {
2723
    margin-right: 18px;
2724
}
2725

    
2726
.network-machine .state .status {
2727
    margin-bottom: 4px;
2728
}
2729

    
2730
.machine-name .name {
2731
    margin-top: -10px !important;
2732
}
2733

    
2734
.machine-name .namecontainer {
2735
    line-height: 18px;
2736
    margin-bottom: 20px;
2737
}
2738

    
2739
div.network-machine:hover {
2740
    background-color: #5CA1C0;
2741
}
2742

    
2743
.machines {
2744
    width: 416px;
2745
    margin-bottom: -8px;
2746
    margin-top: 10px;
2747
}
2748

    
2749
div.empty-network-slot {
2750
    height: 60px;
2751
}
2752

    
2753
div.network-remove-machine, div.network-add-machine {
2754
    background-color: #FB822F;
2755
    color: #bc4b00;
2756
    width:90px;
2757
    float:left;
2758
    margin:40px 0 0 -100px;
2759
}
2760

    
2761
span.remove-icon {
2762
    font-size: 80%;
2763
    margin-left: 15px;
2764
}
2765

    
2766
span.add-icon {
2767
    margin-left: 15px;
2768
}
2769

    
2770
span.remove-icon:hover, span.add-icon:hover {
2771
    cursor:pointer;
2772
    color: #fff;
2773
}
2774

    
2775
div.network-add-machine {
2776
    margin:39px 0 0 0;
2777
}
2778

    
2779
.firewall-on {
2780
    color: #42E342;
2781
}
2782

    
2783
.firewall-off {
2784
    color: #F82E2E;
2785
}
2786

    
2787
.firewall-content {
2788
    color: black;
2789
    font-size: 60%;
2790
    margin-left: 60px;
2791
}
2792

    
2793
.firewall-content .checkbox-legends {
2794
    vertical-align: text-top;
2795
}
2796

    
2797
.checkbox-legends a {
2798
    color: black;
2799
    text-decoration: underline;
2800
    font-size: 100%;
2801
}
2802

    
2803
h5.machine-connect {
2804
    font-size: 75%;
2805
}
2806

    
2807
.machine-connect span {
2808
    text-decoration: underline;
2809
}
2810

    
2811
h5.machine-connect span:hover {
2812
    cursor: pointer;
2813
}
2814

    
2815
.firewall-contents-start-separator {
2816
    background-color: #808080;
2817
    height: 2px;
2818
    margin-bottom: 5px;
2819
    width: 365px;
2820
}
2821

    
2822
.firewall-contents-end-separator {
2823
    background-color: #808080;
2824
    height: 2px;
2825
    margin-left: -60px;
2826
    margin-top: 5px;
2827
    width: 425px;
2828
}
2829

    
2830
.firewall-apply {
2831
    background-color: #666666;
2832
    border: medium none;
2833
    float: right;
2834
    font-size: 105%;
2835
    height: 18px;
2836
    margin-right: 5px;
2837
    margin-top: 3px;
2838
    width: 75px;
2839
}
2840

    
2841
.name-div {
2842
    margin-left: 70px;
2843
    margin-bottom: 20px;
2844
}
2845

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

    
2851
/* Metadata */
2852

    
2853
.info-content {
2854
    clear: both;
2855
    height: 95px;
2856
    width: 512px;
2857
}
2858

    
2859
.metadata-container {
2860
    line-height: 12px;
2861
    height: 85px;
2862
    background-color: #84b7d0;
2863
}
2864

    
2865
.metadata-column {
2866
    border-right: 1px solid #5CA1C0;
2867
    color: black;
2868
    float: left;
2869
    font-size: 60%;
2870
    margin-top: 3px;
2871
    height: 70px;
2872
    padding-bottom: 5px;
2873
}
2874

    
2875
.vm-stats {
2876
    padding-left: 10px;
2877
    padding-right: 5px;
2878
    width: 119px;
2879
}
2880

    
2881
.vm-details {
2882
    width: 169px;
2883
    margin-left:17px;
2884
}
2885

    
2886
.vm-metadata {
2887
    padding-left: 10px;
2888
    width: 129px;
2889
    border: none;
2890
}
2891

    
2892
.metadata-left {
2893
    float:left;
2894
    width: 50px;
2895
    height: 60px;
2896
}
2897

    
2898
.metadata-right {
2899
    width: 73px;
2900
    float:left;
2901
    height: 35px;
2902
    padding-left: 5px;
2903
    position:relative;
2904
    overflow:hidden;
2905
}
2906

    
2907
.metadata-right .items {
2908
    position:absolute;
2909
    height:20000em;
2910
}
2911

    
2912
.metadata-keys-container {
2913
    height: 60px;
2914
    float: left;
2915
}
2916

    
2917
a.manage-metadata {
2918
    font-size: 100%;
2919
    color: black;
2920
    margin-left:17px;
2921
    text-decoration: underline;
2922
}
2923

    
2924
div.machine a.manage-metadata:hover {
2925
    background-color: transparent;
2926
}
2927

    
2928
.metadata-actions, .scrollable {
2929
    padding-left: 5px;
2930
}
2931

    
2932
.metadata-actions .prev,  .metadata-actions .next{
2933
    float:left;
2934
    width:29px;
2935
    height:6px;
2936
    cursor: pointer;
2937
}
2938

    
2939
.metadata-actions .prev {
2940
    background: url("./roll-up.png") no-repeat scroll 0 0 transparent;
2941
}
2942

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

    
2947
.scrollable {
2948
    position:relative;
2949
    overflow:hidden;
2950
    height: 35px;
2951
    width: 60px;
2952
    margin-bottom:2px;
2953
}
2954

    
2955
.scrollable .items {
2956
    position:absolute;
2957
    height:20000em;
2958
}
2959

    
2960
.metadata-bar {
2961
    float: right !important;
2962
    margin: 1px 7px 0 !important;
2963
}
2964

    
2965
/* single view */
2966
.single {
2967
    color: #383838;
2968
    margin-top: -76px;
2969
    padding-bottom: 10px;
2970
    width: 679px;
2971
}
2972

    
2973
.single .column1 {
2974
    float: left;
2975
    margin: 1px 0 25px 17px;
2976
    width: 140px;
2977
}
2978

    
2979
.single .column1 .state {
2980
    float: left;
2981
    margin-left: 4px;
2982
    padding-bottom: 6px;
2983
    padding-top: 3px;
2984
    position: relative;
2985
    right: 0;
2986
    text-align: center;
2987
    width: 126px;
2988
}
2989

    
2990
.single .column1 .state-label {
2991
    padding-top: 5px;
2992
}
2993

    
2994
.single .column1 .indicators {
2995
    margin-right: 38px !important;
2996
}
2997

    
2998
.single div.connect-arrow {
2999
    margin-left: -17px;
3000
}
3001

    
3002
.single div.connect-border {
3003
    margin-left: -29px;
3004
}
3005

    
3006
.single .single-actions {
3007
    padding-bottom: 4px;
3008
    padding-left: 15px;
3009
    width: 69px;
3010
    float: left;
3011
}
3012

    
3013
.single div.single-action {
3014
    font-size: 80%;
3015
    line-height: 18px;
3016
    text-decoration: none;
3017
    cursor: pointer;
3018
}
3019

    
3020
.single div.single-action:hover {
3021
    background-color:#A1C8DB;
3022
    width: 180px;
3023
    opacity: 0.8;
3024
    filter: alpha(opacity = 80);
3025
}
3026

    
3027
.single div.single-action.selected {
3028
    color: #FF7F2A !important;
3029
    width: 50px !important;
3030
}
3031

    
3032
.single div.single-action.selected:hover {
3033
    background-color:transparent;
3034
}
3035

    
3036
div.single div.action-container.destroy {
3037
}
3038

    
3039
.single div.confirm_single {
3040
    font-size: 80%;
3041
    margin: -19px -115px 0 0;
3042
}
3043

    
3044
.single div.action-container.destroy div.confirm_single {
3045
    margin: -18px -116px 0 0;
3046
}
3047

    
3048
.single div.confirm_single button.no {
3049
    margin-left: -5px;
3050
}
3051

    
3052
.single .spinner, .single .wave {
3053
    margin: 5px 50px 0 0px !important
3054
}
3055

    
3056
.single div.action_error {
3057
    margin: 2px 0px 0 605px !important;
3058
    position: relative;
3059
}
3060

    
3061
.single .column2 {
3062
    background-color: #A1C8DB;
3063
    float: left;
3064
    font-size: 78%;
3065
    line-height: 17px;
3066
    margin: 0 0 20px 5px;
3067
    width: 358px;
3068
}
3069

    
3070
.single .column2 .machine-labels {
3071
    float: left;
3072
    font-size: 90%;
3073
    margin-left: 10px;
3074
    margin-top: 10px;
3075
    width: 125px;
3076
}
3077

    
3078
.single .column2 .machine-details {
3079
    float: right;
3080
    text-align: right;
3081
    font-size: 90%;
3082
    width: 210px;
3083
    margin-right: 10px;
3084
    margin-top: 10px;
3085
}
3086

    
3087
.single .column2 .name, .single .column2 .disk, .single .column2 .image-size, .single .column2 .ipv6 {
3088
    margin-bottom: 13px;
3089
}
3090

    
3091
.single .tags {
3092
    clear: both;
3093
    margin-bottom: 10px;
3094
    margin-left: 10px;
3095
}
3096

    
3097
.single .tags-label {
3098
    float: left;
3099
    height: 14px;
3100
    margin-top: -2px;
3101
    padding: 0 5px;
3102
    width: 30px;
3103
}
3104

    
3105
.single .tags-down-arrow {
3106
    background: url("/static/tags-down-arrow.png") no-repeat scroll 1px 7px transparent;
3107
    float: left;
3108
    height: 16px;
3109
    width: 9px;
3110
}
3111

    
3112
.single .tags-header {
3113
    background-color: #84B7D0;
3114
    cursor: pointer;
3115
    height: 16px;
3116
    width: 55px;
3117
}
3118

    
3119
.single .tags-content {
3120

    
3121
}
3122

    
3123
.single .column3 {
3124
    background-color: #A1C8DB;
3125
    height: 200px;
3126
    margin-left: 535px;
3127
    position: absolute;
3128
    top: 325px;
3129
    width: 150px;
3130
    overflow: visible;
3131
}
3132

    
3133
.single .column3 .controls {
3134
    font-size: 80%;
3135
    height: 20px;
3136
    padding-left: 7px;
3137
    padding-right: 7px;
3138
    padding-top: 8px;
3139
}
3140

    
3141
.single .column3 .previous {
3142
    float:left;
3143
    width: 72px;
3144
}
3145

    
3146
.single .column3 .next {
3147
    float: right;
3148
    text-align: center;
3149
    width: 60px;
3150
}
3151

    
3152
.single .column3 .next-label {
3153
    float: right;
3154
    margin-right: 3px;
3155
    margin-top: -2px;
3156
}
3157

    
3158
.single .column3 .next-arrow {
3159
    float: right;
3160
    height: 18px;
3161
    width: 10px;
3162
    background: url("./right-arrow.png") no-repeat scroll 3px 2px transparent;
3163
}
3164

    
3165
.single .column3 .prev-label {
3166
    float: left;
3167
    margin-left: 3px;
3168
    margin-top: -2px;
3169
}
3170

    
3171
.single .column3 .prev-arrow {
3172
    background: url("./left-arrow.png") no-repeat scroll 3px 2px transparent;
3173
    float: left;
3174
    height: 18px;
3175
    width: 10px;
3176
}
3177

    
3178
.single .column3 .separator {
3179
    width: 135px;
3180
    height: 1px;
3181
    background-color: #84B7D0;
3182
    margin: 0 0 0 7px;
3183
    clear: both;
3184
}
3185

    
3186
.single .column3 .servers {
3187
    font-size: 80%;
3188
    line-height: 15px;
3189
    padding-top: 10px;
3190
    text-align: right;
3191
    overflow: visible;
3192
    position: relative;
3193
}
3194

    
3195
.single .column3 .server-name {
3196
    margin-left: 10px;
3197
    padding-right: 5px;
3198
    cursor: pointer;
3199
    padding-bottom: 2px;
3200
}
3201

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

    
3213
.single .toggler {
3214
    color: #FFFFFF;
3215
    float: right;
3216
    font-size: 140%;
3217
    padding-right: 7px;
3218
    padding-top: 7px;
3219
}
3220

    
3221
.single .single-cpu, .single .single-network {
3222
    float: left;
3223
    height: 100px;
3224
    width: 48%;
3225
}
3226

    
3227
.single .cpu-usage, .single .network-usage {
3228
    padding-bottom: 15px;
3229
    padding-left: 20px;
3230
    padding-top: 15px;
3231
    font-size: 90%;
3232
}
3233

    
3234
.single .cpu-graph, .single .network-graph {
3235
    background-color: #A1C8DB;
3236
    height: 210px;
3237
    margin-left: 20px;
3238
    width: 300px;
3239
}
3240

    
3241
.single .single-image {
3242
    width: 126px;
3243
    margin-bottom: 10px;
3244
    margin-left: 4px;
3245
}
3246

    
3247
.single .column3 .previous, .single .column3 .next {
3248
    cursor: pointer;
3249
    background-color: #84B7D0;
3250
    color: white;
3251
    font-size: 100%;
3252
    height: 15px;
3253
    padding-top: 2px;
3254
}
3255

    
3256
.single div.lower {
3257
    clear:both;
3258
    background: url("./running-bg.png") repeat scroll 0 0 transparent;
3259
    width: 700px;
3260
    height: 270px;
3261
}
3262

    
3263
.single div.upper {
3264
    background: url("./running-bg.png") repeat scroll 0 0 transparent;
3265
    height: 400px;
3266
    margin-bottom: 10px;
3267
    padding-top: 60px;
3268
    width: 700px;
3269
}
3270

    
3271
/* console css */
3272
.console-header-logo {
3273
    padding-top: 10px;
3274
    margin-left: 30px;
3275
    position: fixed;
3276
}
3277

    
3278
div.console-container {
3279
    margin: 0 0em;
3280
    height: auto;
3281
}
3282

    
3283
#wrapper.console {
3284
    width: auto;
3285
}
3286

    
3287
.console-info {
3288
    font-size:80%;
3289
    color: white;
3290
    float:left;
3291
    position:relative;
3292
    margin: 25px 0 0 480px;
3293
}
3294

    
3295
applet {
3296
    width: 100%;
3297
    height:75%;
3298
}
3299

    
3300
.console-footer #footer-text{
3301
    float:left;
3302
    left: auto;
3303
    margin-left:30px;
3304
}
3305

    
3306
/* add network wizard (see also #wizard for shared classes) */
3307
#networks-wizard .header {
3308
    background-color: #4085A5;
3309
    height: 56px;
3310
}
3311

    
3312
#networks-wizard div.name-input {
3313
    margin: 75px 0 0 55px;
3314
}
3315

    
3316
#networks-wizard input {
3317
    border: 1px solid #CCCCCC;
3318
    color: #445566;
3319
    letter-spacing: 1px;
3320
    width: 170px;
3321
}
3322

    
3323
#networks-wizard span.help {
3324
    font-style: italic;
3325
    font-size: 80%;
3326
    margin-left: 10px;
3327
}
3328

    
3329
#networks-wizard .separator-end {
3330
    background-color: #387693;
3331
    height: 6px;
3332
    width: 479px;
3333
    margin-left: -13px;
3334
    margin-top: 5px;
3335
}
3336

    
3337
.red {
3338
    color: red;
3339
}
3340

    
3341
/* add server to network wizard (see also #metadata-wizard for shared classes) */
3342
#add-machines-wizard span.machine-name {
3343
    margin-left: 4px;
3344
    vertical-align: text-top;
3345
}
3346

    
3347
#add-machines-wizard img.list-logo {
3348
    margin: 2px 1px 1px;
3349
}
3350

    
3351
.css-panes {
3352
    clear: both;
3353
}
3354

    
3355
.last .network-separator {
3356
    background-color: white;
3357
    height: 10px;
3358
    margin-left: -50px;
3359
    margin-top: -12px;
3360
    width: 20px;
3361
}
3362

    
3363
.last .firewall-content {
3364
    margin-bottom:13px;
3365
}
3366

    
3367
#pub:hover .last .network-separator {
3368
    background-color: #CDE2EC;
3369
}
3370

    
3371
.public-networks .empty-network-slot {
3372
    display: none;
3373
}