Statistics
| Branch: | Tag: | Revision:

root / ui / static / main.css @ 0e10469d

History | View | Annotate | Download (65.2 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
    position: relative;
47
}
48

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

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

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

    
69
#footer div.grnet-sign {
70
    margin-top:10px;
71
}
72

    
73
#footer div.grnet-sign a{
74
    color: #72ADC8;
75
}
76

    
77
#footer div.grnet-sign a:hover {
78
    color: #FFFFFF;
79
}
80

    
81
ol, ul {
82
    list-style: none;
83
}
84

    
85
blockquote, q {
86
    quotes: none;
87
}
88

    
89
blockquote:before, blockquote:after,
90
q:before, q:after {
91
    content: '';
92
    content: none;
93
}
94

    
95
/* remember to define focus styles! */
96
:focus {
97
    outline: 1px dotted #87AADE;
98
}
99

    
100
/* remember to highlight inserts somehow! */
101
ins {
102
    text-decoration: none;
103
}
104

    
105
del {
106
    text-decoration: line-through;
107
}
108

    
109
/* tables still need 'cellspacing="0"' in the markup */
110
table {
111
    border-collapse: collapse;
112
    border-spacing: 0;
113
}
114

    
115
h5 {
116
    font-weight: normal;
117
    margin-bottom:3px;
118
}
119

    
120
/* root element for tabs  */
121
.tab-name {
122
    background-color: #5CA1C0;
123
    color: #FFFFFF;
124
    float: left;
125
    font-size: 150%;
126
    height: 28px;
127
    text-align: center;
128
    width: 170px;
129
}
130

    
131
.tab-separator {
132
    background-color: white;
133
    float: left;
134
    width: 2px;
135
    height: 23px;
136
    margin-top: 4px;
137
}
138

    
139
ul.css-tabs {
140
    padding: 0;
141
    height:31px;
142
    background-color: #5CA1C0;
143
}
144

    
145
ul.css-tabs .secondary {
146
    position:relative;
147
}
148

    
149
/* single tab */
150
ul.css-tabs li {
151
    float:left;
152
    padding:0;
153
    list-style-type:none;
154
}
155

    
156
ul.css-tabs .current {
157
    background: #4085A5;
158
}
159

    
160
/* link inside the tab. uses a background image */
161
ul.css-tabs a {
162
    float:left;
163
    display:block;
164
    text-decoration:none;
165
    color:#d2d2d2;
166
    position:relative;
167
    outline:0;
168
    padding: 4px 25px 0;
169
    height: 27px;
170
}
171

    
172
ul.css-tabs a:hover {
173
    background: #74AEC9;
174
}
175

    
176
/* selected tab */
177
ul.css-tabs a.current {
178
    cursor:default;
179
}
180

    
181
ul.css-tabs a.current:hover {
182
    background: #4085A5;
183
}
184
/* tab pane */
185
div.css-panes {
186
/*    border-top: 10px solid #87aade;
187
    border-bottom: 10px solid #87aade;  */
188
    background: transparent;
189
}
190

    
191
.css-panes > div.pane {
192
    display:none;
193
}
194

    
195
/* CSS3 border radius for various elements. yea - CSS isn't perfect */
196
.rounded, #sheet input, .error {
197
    border-radius: 5px;
198
    -webkit-border-radius: 5px;
199
    -moz-border-radius: 5px;
200
    -o-border-radius: 5px;
201
    -khtml-border-radius: 5px;
202
}
203

    
204
/* validation error message */
205
.error {
206
    background-color:#E8FF6D;
207
    padding:4px;
208
    -webkit-box-shadow: #000 0 0 9pt;
209
    -moz-box-shadow: #000 0 0 9pt;
210
}
211

    
212
/* nested arrow inside error message. It's 100% CSS. No images. */
213
.error em {
214
    border: 10px solid;
215
    border-color: #E8FF6D transparent transparent;
216
    bottom: -17px;
217
    display: block;
218
    height: 0;
219
    left: 10px;
220
    position: absolute;
221
    width: 0;
222
}
223

    
224
/* input field that caused validation error */
225
.invalid {
226
    background-color: rgba(221, 233, 255, 0.898) !important;
227
}
228

    
229
#beforecreate {
230
    position:relative;
231
    background-color: #FF9955;
232
    float: left;
233
    height: 31px;
234
    margin-left: -13px;
235
    margin-top: -6px;
236
    width: 13px;
237
}
238

    
239
#ie-fix {
240
    z-index: 1000;
241
    position: relative;
242
}
243
#createcontainer {
244
    margin-top: 20px;
245
    margin-bottom: 10px;
246
    z-index: 1000;
247
}
248

    
249
#create {
250
    background-color: #FF7F2A;
251
    color: #000;
252
    cursor: pointer;
253
    padding: 7px 24px;
254
    text-decoration: none;
255
    font-size:100%;
256
}
257

    
258
#create:hover {
259
    background-color: #FF9955;
260
}
261

    
262
#console-header {
263
    height: 67px;
264
    margin-bottom:15px;
265
    background: url("./header-bg.png") repeat-x scroll 0 0 #FFFFFF;
266
}
267

    
268
.header-logo {
269
    padding-top: 28px;
270
}
271

    
272
div#footer-text a {
273
    color: #FFFFFF;
274
    text-decoration: none;
275
}
276

    
277
div#footer-text{
278
    clear: both;
279
    color: #FFFFFF;
280
    font-size: 75%;
281
    left: 22%;
282
    padding-top: 10px;
283
    position: absolute;
284
    width: 700px;
285
}
286

    
287
#footer-bg {
288
    background: url("./footer-bg.png") no-repeat scroll 0 0 #4085A5;
289
    float:right;
290
    width: 700px;
291
    height: 119px;
292
    background-position:right;
293
}
294

    
295
.modal {
296
    background-color:#fff;
297
    display:none;
298
    width:30em;
299
    padding:1em;
300
    text-align:left;
301
}
302

    
303
/* server wizard scrollable root element and network wizard */
304
#wizard, #networks-wizard {
305
    font-size:75%;
306
    height:405px;
307
    width:453px;
308
    overflow:hidden;
309
    position:absolute !important;
310
}
311

    
312
/* scrollable items */
313
#wizard .items {
314
    width:20000em;
315
    clear:both;
316
    position:absolute;
317
    display:block;
318
    padding: 0;
319
    margin: 0;
320
    border:none;
321
    background:none;
322
}
323

    
324
/* single item */
325
#wizard .page, #networks-wizard div.container {
326
    padding: 0px 40px 20px 15px;
327
    width:447px;
328
    float:left;
329
    display:block;
330
    border:none;
331
    background-color: transparent;
332
}
333

    
334
#networks-wizard div.container {
335
    background-color: #ECF4F8;
336
    width:400px;
337
    height: 180px;
338
    margin-bottom:50px;
339
}
340

    
341
/* title */
342
#wizard h2, #networks-wizard h2 {
343
    color: #FF7B24;
344
    font-size: 100%;
345
    font-style: italic;
346
    font-weight: bold;
347
    margin-left: 37px;
348
    margin-top: 17px;
349
}
350

    
351
#networks-wizard h2 {
352
    margin-top: 15px;
353
}
354

    
355
#wizard li {
356
    margin-bottom:1.2em;
357
}
358

    
359
#wizard .pane li {
360
    margin: 0;
361
}
362

    
363
#wizard label {
364
    font-size:120%;
365
    display:block;
366
    clear: both;
367
}
368

    
369
#wizard label strong {
370
    position:relative;
371
    top:-1px;
372
    font-size: 80%;
373
    font-weight: normal;
374
}
375

    
376
#wizard label em {
377
    font-size:75%;
378
    color:#666;
379
    font-style:normal;
380
}
381

    
382
#wizard .text {
383
    width: 270px;
384
    padding: 5px;
385
    margin-top: 10px;
386
    border: 1px solid #ccc;
387
    color: #456;
388
    letter-spacing: 1px;
389
}
390

    
391
#wizard select {
392
    border:1px solid #ccc;
393
    width:94%;
394
    padding:4px;
395
    display: none;
396
}
397

    
398
#wizard .double label {
399
    width:50%;
400
    float:left;
401
}
402

    
403
#wizard .double .text {
404
    width:93%;
405
}
406

    
407
#wizard .clearfix {
408
    clear:left;
409
    padding-top:10px;
410
}
411

    
412
#wizard .right {
413
    float:right;
414
}
415

    
416
#wizard .error {
417
    border:1px solid red;
418
}
419

    
420
#wizard a:hover div.image {
421
    background-color: #C5DEE9;
422
}
423

    
424
.selecteddiv {
425
    background-color: #C5DEE9 !important;
426
}
427

    
428
#wizard label a:hover strong {
429
    color: black;
430
}
431

    
432
#wizard div.image span.size {
433
    font-size: 75%;
434
    color: #666;
435
}
436

    
437
#wizard div.image .radio {
438
    float: left;
439
    margin-top: 10px;
440
}
441

    
442
#wizard div.image span.image-id, #wizard div.image span.description {
443
    font-size: 75%;
444
    color: #666;
445
    font-weight: normal;
446
    display:inline;
447
}
448

    
449
#wizard a:hover div.image span.image-id, #wizard a:hover div.image span.description, #wizard a:hover div.image span.size {
450
    color: black;
451
}
452

    
453
#wizard .cost {
454
    color: #79A4C1;
455
    margin-top: 40px;
456
    clear:both;
457
    margin-left: 15px;
458
    font-size: 95%;
459
}
460

    
461
#wizard #status {
462
    height: 50px;
463
    background-color: #4085A5;
464
}
465

    
466
#wizard .headernumber {
467
    font-size: 410%;
468
}
469

    
470
#wizard .headerbody {
471
    font-size: 120%;
472
    font-weight: normal;
473
    display: inline;
474
    top: -15px;
475
    position: relative;
476
}
477

    
478
#wizard .first {
479
    left: -10px;
480
}
481

    
482
#wizard .checked {
483
    color: #64a6c4 !important;
484
}
485

    
486
#wizard .li-2 {
487
    margin-top: -1px !important;
488
}
489

    
490
#wizard .img-check {
491
    margin-bottom: 8px;
492
    margin-left: -8px;
493
}
494

    
495
#wizard .li-1 .img-check {
496
    margin-left: 2px;
497
}
498

    
499
#wizard .topruler, #networks-wizard .topruler, #wizard .bottomruler, #networks-wizard .bottomruler {
500
    background-color: #CDE2EC;
501
    color: #CDE2EC;
502
    border: 0 none;
503
    height: 4px;
504
    margin-left: -1px;
505
    width: 447px;
506
    margin-bottom: 6px;
507
    margin-top: 4px;
508
}
509

    
510
#wizard .bottomruler, #networks-wizard .bottomruler {
511
    margin-top:6px;
512
}
513

    
514
#networks-wizard .topruler, #networks-wizard .bottomruler {
515
    width: 455px;
516
    float: left;
517
}
518

    
519
#wizard #cancel, #networks-wizard .cancel {
520
    background-color: #4085A5;
521
    border-color: #4085A5;
522
    text-align: center !important;
523
}
524

    
525
#wizard #cancel:hover, #networks-wizard .cancel:hover {
526
    background-color: #7DB4CD;
527
    border-color: #7DB4CD;
528
}
529

    
530
#wizard #start, #networks-wizard .create {
531
    text-align: center;
532
    background-color: #FF6600;
533
    border-color: #FF6600;
534
}
535

    
536
#wizard .img-next {
537
    margin: 0 -4px -1px 8px;
538
}
539

    
540
#wizard .img-prev {
541
    margin: 0 8px -1px -4px;
542
}
543

    
544
#networks-wizard .create {
545
    float:right;
546
    width: 140px;
547
}
548

    
549
#wizard #start:hover, #networks-wizard .create:hover {
550
    background-color: #FF9651;
551
    border-color: #FF9651;
552
}
553

    
554
#wizard .separator-end {
555
    position: absolute;
556
    background-color: #387693;
557
    height: 5px;
558
    margin-left: -14px;
559
    margin-top: 362px;
560
    width: 550px;
561
}
562

    
563
.page ul {
564
    height: 270px;
565
    overflow: auto;
566
}
567

    
568
.panes ul.pane {
569
    height: 220px;
570
}
571

    
572
#wizard #tabscontainer {
573
    background-color: #CDE2EC;
574
    height: 20px;
575
    width: 448px;
576
}
577

    
578
.page ul.tabs {
579
    overflow: hidden;
580
    height: auto;
581
    margin-bottom: -1px;
582
    margin-top: -1px;
583
}
584

    
585
.page ul.tabs li {
586
    float: right;
587
    margin: 0 0.2em;
588
}
589

    
590
#status li {
591
    float: left;
592
    color: #387693;
593
    padding: 0 1px 0 37px;
594
    bottom: 0px;
595
}
596

    
597
#status li.active .headernumber {
598
    color: #FFFFFF;
599
}
600

    
601
#status li.active .headerbody {
602
    color: #FFFFFF;
603
}
604

    
605
div.image-container {
606
    border-bottom: 1px solid #CCCCCC;
607
    margin-left: 10px;
608
    margin-right: 10px;
609
}
610

    
611
#page2-container {
612
    background-color: #ECF4F8;
613
    height: 193px;
614
    margin-top: 3px;
615
    padding-top: 25px;
616
}
617

    
618
#page3-container {
619
    background-color: #ECF4F8;
620
    height: 245px;
621
    margin-bottom: 32px;
622
    padding-left: 50px;
623
}
624

    
625
/* slider root element */
626
.slider {
627
    border: 1px solid #666;
628
    cursor: pointer;
629
    display: inline !important;
630
    float: left;
631
    margin: 5px 0 20px 10px;
632
    position: relative;
633
    width: 250px;
634
}
635

    
636
.sliders {
637
    float:left;
638
    width: 40px;
639
    margin-left: 10px;
640
    margin-top: 3px;
641
}
642

    
643
.units {
644
    padding-left:10px;
645
}
646

    
647
.slider-container {
648
    padding-bottom: 15px;
649
    margin-left: 5px;
650
}
651

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

    
665
/* progress bar (enabled with progress: true) */
666
.progress {
667
    height: 3px;
668
    background-color: #387693;
669
}
670

    
671
/* the input field */
672
.range {
673
    border: 1px solid #387693;
674
    float: left;
675
    font-size: 100%;
676
    margin: -3px 0 0 15px;
677
    padding: 2px 5px 2px 0;
678
    text-align: right;
679
    width: 50px;
680
}
681

    
682
.selectedrange {
683
    border-color: #5599FF;
684
}
685

    
686
#credits-indicator {
687
    background-color: #ECF4F8;
688
    float: none;
689
    margin: 0 0 0 10px;
690
    border: 1px solid #387693;
691
    color: #387693;
692
}
693

    
694
/* machines */
695
.machine-container {
696
    min-height: 65px;
697
    margin: 2px 0 0 3px;
698
    padding: 0 4px 0;
699
    clear: both;
700
    width: 523px;
701
    position:relative;
702
}
703

    
704
div.machine {
705
    margin-left: -7px;
706
    min-height: 65px;
707
    padding-left: 7px;
708
    padding-right: 5px;
709
    padding-top: 2px;
710
    width: 516px;
711
}
712

    
713
div.machine:hover {
714
    background-color:#A1C8DB !important;
715
}
716

    
717
div.machine.light-background, div.network.light-background {
718
    background-color:#aed2e3 !important;
719
}
720

    
721
.single .light-background {
722
    background-color:#aed2e3;
723
}
724

    
725
.machine a {
726
    font-weight: normal;
727
    text-decoration: none;
728
}
729

    
730
div.machine-details {
731
    width: 400px;
732
    float:left;
733
}
734

    
735
.machine span.name, .machine a.ip {
736
    font-size: 75%;
737
    color: black;
738
    margin-top: 6px;
739
}
740

    
741
.machine span.name {
742
    font-weight: bold;
743
}
744

    
745
.oldValue {
746
    display:none;
747
}
748

    
749
.state {
750
    margin-top: -40px;
751
}
752

    
753
.state div {
754
    text-align: right;
755
    margin-right: 3px;
756
}
757

    
758
/* icon view actions */
759
div.machine div.actions {
760
    float: right;
761
    font-size: 75%;
762
    font-weight: normal;
763
    height: 68px;
764
    position: absolute;
765
    right: -63px;
766
    width: 70px;
767
    top: 0px;
768
}
769

    
770
div.machine div.actions a {
771
    color: black;
772
    visibility: hidden;
773
    height: 15px;
774
    width: 180px;
775
    margin: 0 0 2px 8px;
776
    display: block;
777
}
778

    
779
div.machine div.actions a:hover {
780
    background-color:#A1C8DB;
781
    opacity: 0.8;
782
    filter: alpha(opacity = 80);
783
}
784

    
785
div.machine div.actions a.selected {
786
    color: #FF7F2A !important;
787
    width: 50px;
788
}
789

    
790
div.machine div.actions a.selected:hover {
791
    background-color:transparent;
792
}
793

    
794
div.machine div.actions a.action-shutdown {
795
    display: block;
796
}
797

    
798
div.machine div.actions a.shutdown-padding {
799
    margin-bottom: 22px;
800
}
801

    
802
div.action-container {
803
    overflow: visible;
804
}
805

    
806
div.actions a.enabled:hover{
807
    color: black !important;
808
    text-decoration: underline;
809
    display: block;
810
}
811

    
812
div.machine:hover .actions a {
813
    visibility: visible;
814
}
815

    
816
div.machine div.display a{
817
    visibility: visible;
818
}
819

    
820
div.running div.machine div.actions .disabled {
821
    display: none;
822
}
823

    
824
div.terminated div.machine div.actions .disabled {
825
    display: none;
826
}
827

    
828
div.terminated div.machine div.actions a.action-destroy {
829
    position: absolute;
830
    bottom: 0;
831
}
832

    
833
div.running div.machine div.actions a.action-destroy {
834
    position: absolute;
835
    bottom: 0;
836
}
837

    
838
div.connect-arrow {
839
    background: url(/static/connect-arrow.png) no-repeat;
840
    height: 28px;
841
    width:14px;
842
    position: absolute;
843
}
844

    
845
.machine div.connect-arrow {
846
    display: none;
847
    left: -3px;
848
    position: absolute;
849
    top: 9px;
850
}
851

    
852
div.connect-arrow:hover, div.connect-arrow.border-hover, div.connect-arrow-ie, div.connect-arrow.border-ie {
853
    cursor: pointer;
854
    background: url(/static/connect-arrow-hover.png) no-repeat;
855
    height: 28px;
856
    width:26px;
857
}
858

    
859
div.connect-border {
860
    opacity: 0.8;
861
    filter: alpha(opacity = 80);
862
    background-color:#4fe0c3;
863
    height:28px;
864
    width: 12px;
865
    position: absolute;
866
}
867

    
868
div.connect-border:hover {
869
    cursor: pointer;
870
}
871

    
872
.machine div.connect-border {
873
    display: none;
874
    left: -15px;
875
    position: absolute;
876
    top: 9px;
877
}
878

    
879
.standard .machine img {
880
    float: left;
881
    margin: 4px 14px 0;
882
}
883

    
884
.standard .running .machine img {
885
   cursor: pointer;
886
}
887

    
888
.list .machine img {
889
    margin: 0;
890
}
891

    
892
div.ip, div.ips {
893
    font-size: 75%;
894
    position: relative;
895
    float: right;
896
    top:1px;
897
    right: 18px;
898
    text-align: right;
899
}
900

    
901
div.indicators {
902
    margin-right: 2px !important;
903
}
904
div.indicator1, div.indicator2, div.indicator3, div.indicator4 {
905
    background-color: #63cf1c;
906
    width:10px;
907
    height:11px;
908
    clear: none;
909
    float:right;
910
}
911

    
912
.view-separator {
913
    color:#5F8DD3;
914
}
915

    
916
.running {
917
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
918
    margin-top: -76px;
919
    padding-bottom: 15px;
920
    width: 699px;
921
    padding-top: 60px;
922
}
923

    
924
.running-state .indicator1, .running-state .indicator2, .running-state .indicator3, .running-state .indicator4 {
925
    background-color: #63cf1c;
926
}
927

    
928
.rebooting-state .indicator1, .rebooting-state .indicator2, .rebooting-state .indicator3, .rebooting-state .indicator4 {
929
    background-color: #d4aa00;
930
}
931

    
932
.error-state .indicator1, .error-state .indicator2, .error-state .indicator3, .error-state .indicator4 {
933
    background-color: #ff0000;
934
}
935

    
936
.terminated-state .indicator1, .terminated-state .indicator2, .terminated-state .indicator3, .terminated-state .indicator4 {
937
    background-color: #5e1616;
938
}
939

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

    
944
.destroying-state .indicator1, .destroying-state .indicator3, .destroying-state .indicator2, .destroying-state .indicator4 {
945
    background-color: #4085a5 !important;
946
}
947

    
948
.shutting-state .indicator1, .shutting-state .indicator3, .shutting-state .indicator2, .shutting-state .indicator4 {
949
    background-color: #940606;
950
}
951

    
952
.starting-state .indicator1, .starting-state .indicator2, .starting-state .indicator3, .starting-state .indicator4 {
953
    background-color: #9ed976;
954
}
955

    
956
.network-indicator .indicator1, .network-indicator .indicator2, .network-indicator .indicator3, .network-indicator .indicator4 {
957
    background-color: #63cf1c;
958
}
959

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

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

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

    
987
.machine div.info {
988
    float:left;
989
    margin-bottom: 8px;
990
    margin-top:3px;
991
}
992

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

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

    
1005
div.machine div.info-label.darker, .single div.tags-label.darker, div.network .darker {
1006
    background-color: #5CA1C0;
1007
}
1008

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

    
1016
.machine div.info div.toggler, .single div.tags div.toggler, div.network div.toggler {
1017
    width:15px;
1018
    height:17px;
1019
    margin-top: -11px;
1020
    margin-left: 37px;
1021
}
1022

    
1023
div.network div.toggler {
1024
    margin-left: 90px;
1025
}
1026

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

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

    
1035
.network div.network-machines div.down {
1036
    background: url(/static/down-arrow.png) no-repeat scroll 2px 2px;
1037
}
1038

    
1039
.network div.network-machine div.firewall div.down {
1040
    background: url(/static/down-arrow.png) no-repeat scroll 2px 2px;
1041
}
1042

    
1043
.machine div.info div.up {
1044
    background: url(/static/up-arrow.png) no-repeat scroll 1px 0;
1045
}
1046

    
1047
.single div.tags div.up {
1048
    background: url(/static/up-arrow.png) no-repeat scroll 2px 2px;
1049
}
1050

    
1051
.network div.network-machines div.up {
1052
    background: url(/static/up-arrow.png) no-repeat scroll 2px 2px;
1053
}
1054

    
1055
.network div.network-machine div.firewall div.up {
1056
    background: url(/static/up-arrow.png) no-repeat scroll 2px 2px;
1057
}
1058

    
1059
button {
1060
    background-color: #87AADE;
1061
    border: 1px solid #87AADE;
1062
    color: #FFFFFF;
1063
    cursor: pointer;
1064
    height: 23px;
1065
    width: 120px;
1066
}
1067

    
1068
button.next {
1069
    background-color: #4085A5;
1070
    border-color: #4085A5;
1071
    text-align: right;
1072
}
1073

    
1074
button.next:hover {
1075
    background-color: #7DB4CD;
1076
    border-color: #7DB4CD;
1077
}
1078

    
1079
button.prev {
1080
    background-color: #4085A5;
1081
    border-color: #4085A5;
1082
    margin-left: -1px;
1083
    text-align: left;
1084
}
1085

    
1086
button.prev:hover {
1087
    background-color: #7DB4CD;
1088
    border-color: #7DB4CD;
1089
}
1090

    
1091
.image-logo {
1092
    float: left;
1093
    margin-right: 1em;
1094
    margin-left: 1.5em;
1095
    margin-top: 4px;
1096
}
1097

    
1098
div.image {
1099
    clear: both;
1100
    display: block;
1101
    margin-bottom: 3px;
1102
    margin-top: 3px;
1103
    padding: 5px;
1104
}
1105

    
1106
div#view-select {
1107
    float: right;
1108
    clear: both;
1109
    color: white;
1110
    position: relative;
1111
    right: 5px;
1112
    top: -35px;
1113
    display: none;
1114
    z-index: 1000;
1115
}
1116

    
1117
a#standard, a#list, a#single {
1118
    text-decoration: none;
1119
    height: 15px;
1120
    width: 17px;
1121
    padding: 1px 8px 2px 9px;
1122
}
1123

    
1124
div#view-select a {
1125
    color:#5f8dd3;
1126
}
1127

    
1128
a#list:hover {
1129
    background: #5f8dd3;
1130
}
1131

    
1132
a#standard:active, a#list:active {
1133
    color:white;
1134
}
1135

    
1136
a#standard {
1137
    background: url(./icon-view.png) no-repeat -36px 0;
1138
}
1139

    
1140
a#list {
1141
    background: url(./list-view.png) no-repeat -36px 0;
1142
}
1143

    
1144
a#single {
1145
    background: url(./single-view.png) no-repeat -36px 0;
1146
}
1147

    
1148
a#standard:hover {
1149
    background: url(./icon-view.png) no-repeat -18px 0;
1150
}
1151

    
1152
a#list:hover {
1153
    background: url(./list-view.png) no-repeat -18px 0;
1154
}
1155

    
1156
a#single:hover {
1157
    background: url(./single-view.png) no-repeat -18px 0;
1158
}
1159

    
1160
a#standard.activelink {
1161
    background: url(./icon-view.png) no-repeat 0px 0;
1162
}
1163

    
1164
a#list.activelink {
1165
    background: url(./list-view.png) no-repeat 0px 0;
1166
}
1167

    
1168
a#single.activelink {
1169
    background: url(./single-view.png) no-repeat 0px 0;
1170
}
1171

    
1172
#machinetype {
1173
    background-color: #CDE2EC;
1174
    height: 25px;
1175
    margin-bottom: 0px !important;
1176
}
1177

    
1178
div.machine-type {
1179
    float: left;
1180
    margin: 4px 18px 20px;
1181
}
1182

    
1183
.machine-type .active {
1184
    color: #FFFFFF
1185
}
1186

    
1187
#machinesview {
1188
    min-height: 270px;
1189
    margin-top: 40px;
1190
}
1191

    
1192
.list#machinesview {
1193
    margin-left: -20px;
1194
    display:none;
1195
}
1196

    
1197
#machinesview-list.list {
1198
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
1199
    margin-top: -76px;
1200
    padding-left: 15px;
1201
    padding-top: 76px;
1202
    min-height: 270px;
1203
}
1204

    
1205
#machinesview_content {
1206
    display:none;
1207
}
1208

    
1209
.list-machines {
1210
    min-width: 515px;
1211
}
1212

    
1213
#emptymachineslist {
1214
    background-color: #6BA9C6;
1215
    color: #A0A0A0;
1216
    display: none;
1217
    margin-top: -45px;
1218
    padding: 65px 150px 35px;
1219
    text-align: justify;
1220
}
1221

    
1222
#welcomeheader {
1223
    color:white;
1224
    text-align: center;
1225
}
1226

    
1227
.welcomebody {
1228
    color: white;
1229
    font-size:80%;
1230
}
1231

    
1232
.welcomebody a {
1233
    color: white;
1234
}
1235

    
1236
.welcomefooter {
1237
    color: white;
1238
    font-size:60%;
1239
}
1240

    
1241
.welcomefooter a {
1242
    color: white;
1243
}
1244

    
1245
.emptycreatecontainer {
1246
    margin-left: 430px !important;
1247
    position: absolute;
1248
    margin-top: 5px !important;
1249
    width: 180px;
1250
    background-color: #CCCCCC;
1251
    padding: 5px;
1252
    padding-left: 10px;
1253
}
1254

    
1255
.emptycreate {
1256
    margin: 20px 10px 5px 0 !important;
1257
}
1258

    
1259
#createbody {
1260
    display:none;
1261
    font-size: 80%;
1262
}
1263

    
1264
div.list label img {
1265
    margin: 5px 5px -3px 0;
1266
}
1267

    
1268
div.list label {
1269
    color: #3D3D3D;
1270
    font-size: 75%;
1271
}
1272

    
1273
div.list .state {
1274
    margin-top: 7px;
1275
    margin-right: 10px;
1276
}
1277

    
1278
div.list table tbody {
1279
    margin-top: 8px;
1280
}
1281

    
1282
div.list .stopped {
1283
    margin-top: 8px;
1284
}
1285

    
1286
/* root element for tabs  */
1287
#wizard ul.tabs {
1288
    margin-right: -1px;
1289
    float: right;
1290
}
1291

    
1292
#wizard div.panes {
1293
    height: 247px;
1294
    clear:both;
1295
    margin-top: 3px;
1296
}
1297

    
1298
.typebody {
1299
    font-size: 80%;
1300
    font-weight: normal;
1301
    position: relative;
1302
    top: -3px;
1303
}
1304

    
1305
.typehover {
1306
    color: #FFFFFF;
1307
}
1308

    
1309
#label-name {
1310
    margin-top: 10px;
1311
}
1312

    
1313
/* single tab */
1314
#wizard ul.tabs li {
1315
    margin-bottom: 0;
1316
    list-style-type:none;
1317
    float: left;
1318
}
1319

    
1320
/* link inside the tab. uses a background image */
1321
#wizard ul.tabs a {
1322
    display:block;
1323
    padding: 0.2em 0.5em 0.1em 0.4em;
1324
    text-decoration:none;
1325
    color: #FFFFFF;
1326
    position:relative;
1327
    top:1px;
1328
    outline:0;
1329
    background-color: transparent;
1330
    text-align: center;
1331
    width: 100px;
1332
    white-space: nowrap;
1333
    height: 17px;
1334
}
1335

    
1336
#wizard ul.tabs a:hover {
1337
    color: #FFFFFF;
1338
    background-color:#4085A5;
1339
}
1340

    
1341
/* selected tab */
1342
#wizard ul.tabs a.current {
1343
    color: white;
1344
    background-color: #7DB4CD;
1345
    cursor: default;
1346
}
1347

    
1348
#wizard #standard-images {
1349
    background-color: #ECF4F8;
1350
}
1351

    
1352
div.list div.actions {
1353
    display: none;
1354
    clear: left;
1355
    float: right;
1356
    margin-right: 15px;
1357
    margin-top: 37px;
1358
    text-align: right;
1359
    width: 120px;
1360
}
1361

    
1362
div.list div.actions a {
1363
    clear: left;
1364
    color: #A1A1A1;
1365
    display: block;
1366
    font-size:75%;
1367
    margin-bottom: 2px;
1368
}
1369

    
1370
div.list div.actions a:hover {
1371
    background-color: transparent;
1372
}
1373

    
1374
div.list div.actions a.enabled {
1375
    color: #3D3D3D;
1376
}
1377

    
1378
div.list div.actions a.enabled:hover{
1379
    cursor: pointer;
1380
    color: black;
1381
    text-decoration: underline;
1382
}
1383

    
1384
div.list div.actions a.selected {
1385
    color: #FF7F2A !important;
1386
}
1387

    
1388
input.machine {
1389
    width: 13px;
1390
    height: 13px;
1391
    top: -1px;
1392
    overflow: hidden;
1393
}
1394

    
1395
.description-container {
1396
    display: inline-block;
1397
    position: relative;
1398
    width: 300px;
1399
}
1400

    
1401
#wizard .button-container {
1402
    height: 20px;
1403
}
1404

    
1405
/* metadata editing and add machines to network overlays */
1406
#metadata-wizard, #add-machines-wizard {
1407
    position:absolute !important;
1408
    overflow:hidden;
1409
    width:450px;
1410
    display:none;
1411
    background-color:#fff;
1412
    text-align:left;
1413
    font-size: 80%;
1414
    border-bottom: 5px solid #4085A5;
1415
}
1416

    
1417
#metadata-wizard .close, #add-machines-wizard .close  {
1418
    background-image: url("./close-popup.png");
1419
    background-repeat: no-repeat;
1420
    cursor: pointer;
1421
    height: 13px;
1422
    position: absolute;
1423
    right: 7px;
1424
    top: 9px;
1425
    width: 13px;
1426
}
1427

    
1428
#metadata-wizard .popup-header, #add-machines-wizard .popup-header {
1429
    background-color: #4085A5;
1430
    color: white;
1431
    font-size: 95%;
1432
    font-weight: normal;
1433
    height: 20px;
1434
    margin-left: -16px;
1435
    margin-top: -16px;
1436
    padding-bottom: 2px;
1437
    padding-left: 30px;
1438
    padding-top: 10px;
1439
    width: 482px;
1440
}
1441

    
1442
#metadata-wizard .popup-title, #metadata-wizard .machine-name, #add-machines-wizard .popup-title, #add-machines-wizard .network-name {
1443
    font-size: 120%;
1444
    padding-bottom: 7px;
1445
    padding-top: 10px;
1446
    float:left;
1447
}
1448

    
1449
#metadata-wizard .popup-title {
1450
    padding-bottom: 0px;
1451
    font-size: 120%;
1452
}
1453

    
1454
#metadata-wizard .name-container {
1455
    display: inline-block;
1456
    clear: both;
1457
}
1458

    
1459
#add-machines-wizard .network-name {
1460
    padding-left: 5px;
1461
}
1462

    
1463
#metadata-wizard .popup-body, #add-machines-wizard .popup-body {
1464
    background-image: url("./meta-wiz-bg.png");
1465
    margin-left: -16px;
1466
    margin-right: -16px;
1467
    margin-top: 1px;
1468
    height: 250px;
1469
    overflow-y: auto;
1470
    overflow-x: hidden;
1471
}
1472

    
1473
#metadata-wizard .popup-body-inner, #add-machines-wizard .popup-body-inner {
1474
    background: url("./meta-wiz-inner-bg.png") repeat-x scroll 0 0 transparent;
1475
    font-size: 80%;
1476
    height: 180px;
1477
    margin-left: 25px;
1478
    margin-top: 10px;
1479
    padding-left: 15px;
1480
    width: 420px;
1481
}
1482

    
1483
#metadata-wizard .popup-separator, #add-machines-wizard .popup-separator {
1484
    background-color: #74AEC9;
1485
    height: 1px;
1486
    width: 402px;
1487
    margin-bottom: 30px;
1488
    clear: left;
1489
    font-size: 1px;
1490
}
1491

    
1492
#metadata-wizard .metadata-pair-template {
1493
    height: 15px;
1494
    padding-top: 2px;
1495
    width: 350px;
1496
}
1497

    
1498
#metadata-wizard div.metadata-pair-template:hover {
1499
    background-color: #74AEC9;
1500
}
1501

    
1502
#metadata-wizard .metadata-container, #add-machines-wizard .machines-container {
1503
    background-color: transparent;
1504
    float: left;
1505
    width: 400px;
1506
    font-size: 120%;
1507
}
1508

    
1509
#metadata-wizard .machine-icon {
1510
    float: left;
1511
    padding-left: 10px;
1512
    padding-right: 3px;
1513
    padding-top: 7px;
1514
}
1515

    
1516
#metadata-wizard .large-spinner, #add-machines-wizard .large-spinner {
1517
    display: block;
1518
    margin: 50px 0 0 185px;
1519
}
1520

    
1521
#metadata-wizard .metadata-key {
1522
    float: left;
1523
    width: 110px;
1524
    padding-left: 5px;
1525
}
1526

    
1527
#metadata-wizard .metadata-value {
1528
    width: auto;
1529
}
1530

    
1531
#metadata-wizard .metadata-add-template {
1532
    background-color: #74AEC9;
1533
    width: 350px;
1534
    position: relative;
1535
    overflow: visible;
1536
}
1537

    
1538
#metadata-wizard #add-meta-value {
1539
    margin-left: 25px;
1540
    width: 150px;
1541
}
1542

    
1543
#metadata-wizard button, #add-machines-wizard button {
1544
    font-size: 80%;
1545
    width: 87px;
1546
    float: right;
1547
    background-color: #5599FF;
1548
    border: 0px solid #5599FF;
1549
    padding: 0;
1550
    text-align: center;
1551
    margin-right: 8px;
1552
}
1553

    
1554
#metadata-wizard .buttons, #add-machines-wizard .buttons {
1555
    border-top: 2px solid #4085A5;
1556
    height: 30px;
1557
    margin-left: 25px;
1558
    margin-right: 40px;
1559
    width: 400px;
1560
    font-size: 120%;
1561
}
1562

    
1563
#metadata-wizard button.save, #add-machines-wizard button.cancel {
1564
    float: left;
1565
    height: 23px;
1566
    margin: 10px 0 0 0;
1567
    width: 87px;
1568
    background-color: #4085A5;
1569
    border-color: #4085A5;
1570
}
1571

    
1572
#metadata-wizard button.save:hover, #add-machines-wizard button.cancel:hover {
1573
    background-color: #7DB4CD;
1574
    border-color: #7DB4CD;
1575
}
1576

    
1577
#metadata-wizard button.create, #add-machines-wizard button.add {
1578
    height: 23px;
1579
    margin: 10px 0 0 0;
1580
    background-color: #FF6600;
1581
    border-color: #FF6600;
1582
}
1583

    
1584
#metadata-wizard button.create:hover, #add-machines-wizard button.add:hover {
1585
    background-color: #FF9651;
1586
    border-color: #FF9651;
1587
}
1588

    
1589
#metadata-wizard .editbuttons {
1590
    margin-top: 4px;
1591
    margin-right: 0;
1592
}
1593

    
1594
#metadata-wizard .vertical-separator {
1595
    height: 17px;
1596
    width: 1px;
1597
    background-color: #74AEC9;
1598
    float:left;
1599
    margin-right: 10px;
1600
}
1601

    
1602
#metadata-wizard h3, #add-machines-wizard h3 {
1603
    font-weight:normal;
1604
}
1605

    
1606
#metadata-wizard .metadata-edit {
1607
    clear: none;
1608
    cursor: pointer;
1609
    float: right;
1610
    margin-right: 0;
1611
    width: 40px;
1612
    margin-top: -14px;
1613
    display:none;
1614
}
1615

    
1616
#metadata-wizard .metadata-edit .edit, #metadata-wizard .metadata-edit .remove {
1617
    background-repeat: no-repeat;
1618
    color: transparent;
1619
    font-size: 75%;
1620
    float: left;
1621
    width: 16px;
1622
    height: 16px;
1623
}
1624

    
1625
#metadata-wizard .addbuttons {
1626
    display: block;
1627
    clear: none;
1628
    width: 40px;
1629
    margin-right: -1px !important;
1630
    margin-top: 2px;
1631
    float:right;
1632
    cursor: pointer;
1633
}
1634

    
1635
.metadata-pair-template .editbuttons {
1636
    margin-top: -19px !important;
1637
    margin-right: -2px !important;
1638
}
1639

    
1640
#metadata-wizard .metadata-edit .edit {
1641
    background-image: url("./meta-edit.png");
1642
    margin-left: 2px;
1643
}
1644

    
1645
#metadata-wizard .metadata-edit .remove, #metadata-wizard .editbuttons .remove {
1646
    background-image: url("./meta-remove.png");
1647
    margin-left: 4px;
1648
    background-repeat: no-repeat;
1649
    color: transparent;
1650
    font-size: 75%;
1651
    height: 16px;
1652
    width: 16px;
1653
    float: left;
1654
}
1655

    
1656
#metadata-wizard .editbuttons .save {
1657
    background-image: url("./meta-save.png");
1658
    padding-top:0;
1659
}
1660

    
1661
#metadata-wizard .addbuttons .cancel {
1662
    background-image: url("./meta-remove.png");
1663
    margin-left: 3px;
1664
}
1665

    
1666
#metadata-wizard .addbuttons .save {
1667
    background-image: url("./meta-save.png");
1668
    margin-left: 1px;
1669
}
1670

    
1671
#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 {
1672
    background-color: #4287a7;
1673
}
1674

    
1675
#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 {
1676
    background-color: #74AEC9;
1677
}
1678

    
1679
#metadata-wizard .addbuttons .cancel, #metadata-wizard .addbuttons .save {
1680
    width: 16px;
1681
    height: 16px;
1682
    float: left;
1683
    background-repeat: no-repeat;
1684
    color: transparent;
1685
}
1686

    
1687
#metadata-wizard .metatextbox {
1688
    font-size: 90%;
1689
    height: 18px;
1690
    margin-top: -2px;
1691
    color: black;
1692
    width: 150px;
1693
}
1694

    
1695
#metadata-wizard p, #add-machines-wizard p {
1696
    margin-left: 7px;
1697
    width: 200px;
1698
}
1699

    
1700
#metadata-wizard div.bottomruler, #add-machines-wizard div.bottomruler {
1701
    background-color: #666;
1702
    height: 20px;
1703
    margin-top: 17px;
1704
}
1705

    
1706
#metadata-wizard button.remove {
1707
    height: 15px;
1708
    width: 70px;
1709
    background-color: #d35f5f;
1710
    border-color: #d35f5f;
1711
}
1712

    
1713
#metadata-wizard button.edit {
1714
    height: 15px;
1715
    width: 70px;
1716
    background-color: #666;
1717
    border-color: #666;
1718
    margin-top: -12px;
1719
}
1720

    
1721
#metadata-wizard input {
1722
    font-style: italic;
1723
    color: #ccc;
1724
}
1725

    
1726
#metadata-wizard textarea.edit-meta-value {
1727
    font-style: normal;
1728
    text-align: left;
1729
    color: black;
1730
    margin-top: 2px;
1731
    width:200px;
1732
    height: 49px;
1733
}
1734

    
1735
#metadata-wizard input {
1736
    font-size: 80%;
1737
}
1738

    
1739
#metadata-wizard input.key {
1740
    height: 15px;
1741
    left: 460px;
1742
    position: absolute;
1743
    top: 83px;
1744
    width: 230px;
1745
}
1746

    
1747
#metadata-wizard textarea.value {
1748
    width: 267px;
1749
    height: 170px;
1750
    overflow: auto;
1751
}
1752

    
1753
#metadata-wizard .input-enabled {
1754
    color: black;
1755
    text-align: left;
1756
    font-style: normal;
1757
}
1758

    
1759
#metadata-wizard label.meta-value {
1760
    vertical-align: top;
1761
}
1762

    
1763
#metadata-wizard button.cancel, #metadata-wizard #edit-dialog button.close {
1764
    float: left;
1765
    margin: 4px 0 0 25px;
1766
    background-color: #d35f5f;
1767
    border-color: #d35f5f;
1768
}
1769

    
1770
/* metadata dropdown combo */
1771
.meta-key {
1772
    margin-right: 18px;
1773
    float:left;
1774
}
1775
#metadata-wizard .textdropdown-outer {
1776
    float: left;
1777
    overflow: visible;
1778
}
1779

    
1780
#metadata-wizard .textdropdown-btn {
1781
    background: url("./dropdown-arrow.gif") no-repeat scroll center center transparent;
1782
    cursor: pointer;
1783
    float: right;
1784
    left: 90px;
1785
    margin-top: 4px;
1786
    position: absolute;
1787
    width: 20px;
1788
}
1789

    
1790
#metadata-wizard ul {
1791
    border: 1px solid #ccc;
1792
    padding: 0px;
1793
    list-style: none;
1794
    margin: 0px;
1795
    background-color: white;
1796
    height: auto !important;
1797
    padding-left: 5px;
1798
    width: 103px !important;
1799
    position: relative;
1800
}
1801

    
1802
#metadata-wizard ul li {
1803
    clear: both;
1804
    display: block;
1805
    float: right;
1806
    list-style: none outside none;
1807
    margin-bottom: 0 !important;
1808
    margin-left: 0 !important;
1809
    padding-bottom: 2px;
1810
    padding-right: 2px;
1811
    padding-top: 2px;
1812
    width: 100%;
1813
}
1814

    
1815
#metadata-wizard ul li:hover {
1816
    background-color: #efefef;
1817
    cursor: pointer;
1818
}
1819

    
1820
#metadata-wizard .dropdownitem {
1821
    margin-left: 10px;
1822
}
1823

    
1824
#metadata-wizard #txtdropdown:focus {
1825
    outline: 0 none;
1826
}
1827

    
1828
#metadata-wizard #add-meta-key {
1829
    height: 16px;
1830
    margin-left: 5px;
1831
    margin-top: 2px;
1832
    width: 105px !important;
1833
}
1834

    
1835
/* notification box */
1836
#yes-no {
1837
    height: 150px;
1838
    z-index: 9999;
1839
    border-bottom: 5px solid #4085A5;
1840
}
1841

    
1842
#yes-no p, #yes-no button {
1843
    margin-top: 15px;
1844
}
1845

    
1846
#error-success {
1847
    z-index: 9999;
1848
    border-bottom: 5px solid #4085A5;
1849
    min-height: 150px;
1850
    top: 120px !important;
1851
    position: absolute !important;
1852
}
1853

    
1854
#error-success p {
1855
    margin-top: 5px;
1856
}
1857

    
1858
#error-success strong {
1859
    color: #F49C1A;
1860
}
1861

    
1862
#error-success .close {
1863
    background-image: url("./close-popup.png");
1864
    background-repeat: no-repeat;
1865
    cursor: pointer;
1866
    height: 13px;
1867
    position: absolute;
1868
    right: 7px;
1869
    top: 9px;
1870
    width: 13px;
1871
}
1872

    
1873
.popup-header-error {
1874
    background-color: #800000 !important;
1875
}
1876

    
1877
.popup-border-error {
1878
    border-color: #800000 !important;
1879
    width:auto;
1880
}
1881

    
1882
.popup-details-error {
1883
    border: none !important;
1884
}
1885

    
1886
.popup-separator-error {
1887
    margin-bottom: 5px !important;
1888
}
1889

    
1890
#error-success .popup-header {
1891
    background-color: #4085A5;
1892
    color: white;
1893
    font-size: 95%;
1894
    font-weight: normal;
1895
    height: 20px;
1896
    margin-left: -16px;
1897
    margin-top: -16px;
1898
    padding-bottom: 2px;
1899
    padding-left: 30px;
1900
    padding-top: 10px;
1901
    width: 482px;
1902
    margin-right:-16px;
1903
}
1904

    
1905

    
1906
#error-success.success h3 span.header-box{
1907
    background-color: #71c837;
1908
    display: block;
1909
    background-image: url("./save-green.png");
1910
    background-position: right 0;
1911
    background-repeat: no-repeat;
1912
    width: 80px;
1913
    padding: 3px 3px 3px 8px;
1914
    margin-top: -6px;
1915
    font-size: 90% !important;
1916
    margin-left: -11px;
1917
}
1918

    
1919
#error-success .popup-body {
1920
    background: url("./popup-bg.png") repeat-x scroll 0 0 transparent;
1921
    margin-left: -16px;
1922
    margin-right: -16px;
1923
    margin-top: 1px;
1924
    min-height: 142px;
1925
    padding-top: 10px;
1926
}
1927

    
1928
#error-success .popup-body-inner {
1929
    background: url("./popup-inner-bg.png") repeat-x scroll 0 0 transparent;
1930
    font-size: 80%;
1931
    min-height: 120px;
1932
    margin-left: 20px;
1933
    padding-left: 15px;
1934
    width: 460px;
1935
}
1936

    
1937
#error-success .popup-separator {
1938
    background-color: #74AEC9;
1939
    height: 1px;
1940
    font-size:1%;
1941
    width: 442px;
1942
    margin-bottom: 30px;
1943
}
1944

    
1945
#error-success .machine-now-building {
1946
    font-size: 95%;
1947
    padding-bottom: 7px;
1948
    padding-top: 10px;
1949
}
1950

    
1951
#error-success.success .machine-now-building {
1952
    padding-bottom: 14px !important;
1953
}
1954

    
1955
#error-success .password-container {
1956
    width: 430px;
1957
    padding: 5px;
1958
    border: 2px solid #75b54a;
1959
    background-color: #aade87;
1960
}
1961

    
1962
#error-success .password-header {
1963
    margin-bottom: 5px;
1964
}
1965

    
1966
#error-success .password {
1967
    color: #447821;
1968
}
1969

    
1970
#error-success .popup-details {
1971
    border: 2px solid #FF7F2A;
1972
    float: left;
1973
    margin-left: 10px;
1974
    padding: 2px;
1975
}
1976

    
1977
#error-success.success .popup-details {
1978
    border: none !important;
1979
    float: none !important;
1980
    margin-left: none !important;
1981
    margin-top: 10px;
1982
}
1983

    
1984
#error-success.success .popup-separator {
1985
    margin-bottom: 14px !important;
1986
}
1987

    
1988
#error-success .write-password {
1989
    margin-bottom: 5px;
1990
    padding-left: 30px;
1991
}
1992

    
1993
#error-success .write-password-password {
1994
    padding-left: 30px;
1995
    color: #447821;
1996
    display: inline;
1997
    font-size: 110%;
1998
    font-weight: bold;
1999
}
2000

    
2001
#error-success .write-password-details {
2002
    font-size: 75%;
2003
}
2004

    
2005
.more-details {
2006
    display: block;
2007
}
2008

    
2009
.popup-details a:link, .popup-details a:visited{
2010
    color: black;
2011
}
2012

    
2013
/* Confirmation boxes */
2014
div.confirm_single, div.confirm_multiple, div.action_error {
2015
    display: none;
2016
    color: black;
2017
}
2018

    
2019
div.action-container.destroy div.confirm_single {
2020
    bottom: 0;
2021
    position: absolute;
2022
    left: 83px;
2023
}
2024

    
2025
div.terminated div.action-container.destroy div.confirm_single {
2026
    margin-top: 30px;
2027
}
2028

    
2029
div.confirm_single button, div.confirm_multiple button, div.action_error button {
2030
    font-size: 100%;
2031
    cursor: pointer;
2032
    color: black;
2033
    height: 20px !important;
2034
}
2035

    
2036
div.confirm_single {
2037
    float: right;
2038
    margin: -20px -122px 0 0;
2039
}
2040

    
2041
div.confirm_single button {
2042
    border: none;
2043
}
2044

    
2045
div.confirm_single button.yes {
2046
    width: 90px;
2047
    background-color:#FF7F2A;
2048
}
2049

    
2050
div.confirm_single button.yes:hover {
2051
    background-color: #FF9955;
2052
}
2053

    
2054
div.confirm_single button.no {
2055
    width: 20px;
2056
    margin-left:-5px;
2057
    background-color: #FF9955;
2058
    color:#d95d0a;
2059
}
2060

    
2061
div.confirm_single button.no:hover {
2062
    color: white;
2063
}
2064

    
2065
div.confirm_multiple {
2066
    background-color: #4085A5;
2067
    font-size: 75%;
2068
    z-index: 1;
2069
    position: absolute;
2070
    width: 698px;
2071
    height: 28px;
2072
    margin-top: 15px;
2073
}
2074

    
2075
div.confirm_multiple p {
2076
    float: left;
2077
    color: #FF7F2A;
2078
    font-weight: bold;
2079
    margin: 7px 0 0 200px;
2080
}
2081

    
2082
#networks-pane div.confirm_multiple p {
2083
    margin: 7px 0 0 100px;
2084
}
2085

    
2086
div.confirm_multiple button {
2087
    float: right;
2088
    background-color: transparent;
2089
    border: 1px solid #5CA1C0;
2090
    margin: 4px 5px 0 0;
2091
}
2092

    
2093
div.confirm_multiple button.yes {
2094
    border-color: #FF7F2A;
2095
    padding: 0 12px;
2096
}
2097

    
2098
div.confirm_multiple button.yes:hover {
2099
    background-color: #FF7F2A;
2100
}
2101

    
2102
div.confirm_multiple button.no {
2103
    padding: 0px 16px;
2104
}
2105

    
2106
div.confirm_multiple button.no:hover {
2107
    background-color: #5CA1C0;
2108
}
2109

    
2110
div.action_error {
2111
    width: 80px;
2112
    height: 60px;
2113
    padding: 5px;
2114
    margin: -2px 0 0 595px;
2115
    background-color: #4085A5;
2116
    font-size: 75%;
2117
    line-height: 1.5;
2118
    z-index:1;
2119
    color: #FF7F2A;
2120
    position:absolute;
2121
    top: 0px;
2122
}
2123

    
2124
.action_error button {
2125
    width: 80px !important;
2126
    background-color: transparent;
2127
    border: 1px solid;
2128
    padding: 0px;
2129
    border-color: #FF7F2A;
2130
}
2131

    
2132
div.action_error button.details {
2133
    margin: 5px 0 0 0px;
2134
    padding: 0 15px;
2135
}
2136

    
2137
div.action_error button.details:hover {
2138
    background-color: #FF7F2A;
2139
}
2140

    
2141
div#aboutuser{
2142
    float:right;
2143
    clear: both;
2144
    color: #FFFFFF;
2145
    font-size: 75%;
2146
    margin-top: -25px;
2147
}
2148

    
2149
div#user{
2150
    clear: both;
2151
    color: #FFFFFF;
2152
    font-size: 75%;
2153
    margin-top: 38px;
2154
    padding-bottom: 10px;
2155
    z-index: 400;
2156
    position: absolute;
2157
    right:0;
2158
}
2159

    
2160
div#user a{
2161
    color: #FFFFFF;
2162
    text-decoration: none;
2163
}
2164

    
2165
div#user a.current_lang {
2166
    color: #72ADC8;
2167
}
2168

    
2169
div#user .usermenu {
2170
    float: left;
2171
    cursor: pointer;
2172
    overflow: hidden;
2173
    padding-top: 5px;
2174
    margin-top: -5px;
2175
    position: relative;
2176
}
2177

    
2178
div#user .username {
2179
    display: block;
2180
    margin-right: 10px;
2181
    padding-right: 18px;
2182
    padding-left: 4em;
2183
    height: 20px;
2184
    background: url("./down-arrow-light.png") no-repeat right;
2185
    background-position: right 6px;
2186
    font-weight: bold;
2187
}
2188

    
2189
div#user .hovered {
2190
    background: #599EBD;
2191
    overflow: visible;
2192
    border-bottom: 1px solid #C7DFE9;
2193
}
2194

    
2195
div#user .hovered .username {
2196
    background-image: url("./down-arrow-lighter.png");
2197
}
2198

    
2199
div#user .active {
2200
    background-color: #BED5E0 !important;
2201
}
2202

    
2203
div#user .active .username {
2204
    color: #599EBD;
2205
    background-image: url("./down-arrow-lighter.png");
2206
}
2207

    
2208
div#user .useractions {
2209
    display: none;
2210
}
2211

    
2212
div#user .active .useractions {
2213
    display: block;
2214
    text-align: right;
2215
    color: #4085A5;
2216
    background-color: #D0E3ED;
2217
    margin-top:-1px;
2218
    border-top:1px solid #fff;
2219
    position: relative;
2220
    top: 1px;
2221
}
2222

    
2223
div#user .useractions li {
2224
    padding: 5px 10px;
2225
    border-bottom: 1px solid #efefef;
2226
    text-align: right;
2227
    display: block;
2228
    background-color: transparent;
2229
}
2230

    
2231
div#user .useractions li a {
2232
    color: #4085A5;
2233
    display: inline-block;
2234
    padding:5px 0;
2235
    padding-left: 30px;
2236
    padding-bottom: 6px;
2237
    background-repeat: no-repeat;
2238
    background-position: center left;
2239
}
2240

    
2241
div#user .useractions li.hovered {
2242
    background-color: #E1EFF6;
2243
}
2244

    
2245
div#user .useractions li.last {
2246
    border-bottom: none;
2247
}
2248

    
2249
div#user .useractions .logout a {
2250
    background-image: url("./icon-logout.png");
2251
}
2252

    
2253
div#user .langmenu {
2254
    float: left;
2255
    border-left: 1px solid #ffffff;
2256
    padding-left: 10px;
2257
    margin-left: -1px;
2258
}
2259

    
2260
div#user .langmenu .sep {
2261
    display: inline-block;
2262
    color: #72ADC8;
2263
}
2264

    
2265
.separator {
2266
    background-color: #74AEC9;
2267
    height: 10px;
2268
    width: 700px;
2269
    font-size: 1px;
2270
    line-height: 0px;
2271
}
2272

    
2273
#disks.separator {
2274
    background-color: #dea842;
2275
}
2276

    
2277
#networks.separator {
2278
    background-color: #6c535d;
2279
}
2280

    
2281
.network-machine h5 {
2282
    margin-bottom: 26px;
2283
    margin-top:0px;
2284
}
2285

    
2286
.machine-container .separator {
2287
    width: 508px;
2288
    height: 1px;
2289
    margin-top: 2px;
2290
    background-color: #5CA1C0;
2291
    margin-left: 13px;
2292
}
2293

    
2294
.machine h5 {
2295
    margin: -3px 0px 4px 0px;
2296
}
2297

    
2298
.machine h5.namecontainer {
2299
    margin-top: 1px;
2300
}
2301

    
2302
.editbuttons {
2303
    display: block;
2304
    clear: none;
2305
    width: 40px;
2306
    margin-right: 32%;
2307
    padding-top: 2px;
2308
    float: right;
2309
    cursor: pointer;
2310
    position: relative;
2311
    z-index: 1000;
2312
}
2313

    
2314
div.editbuttons div.save:hover, div.editbuttons div.cancel:hover {
2315
    background-color: #84b7d0;
2316
}
2317

    
2318
div.editbuttons div.cancel:hover {
2319
    background-image: url("./cancel-onhover.png");
2320
}
2321

    
2322
.editbuttons .cancel, .editbuttons .save {
2323
    background-repeat: no-repeat;
2324
    color: transparent;
2325
    height: 16px;
2326
    width: 16px;
2327
    float: left;
2328
}
2329

    
2330
.editbuttons .cancel {
2331
    background-image: url("./cancel.png");
2332
    margin-left: 3px;
2333
}
2334

    
2335
.editbuttons .save {
2336
    background-image: url("./save.png");
2337
    margin-left: 1px;
2338
}
2339

    
2340
.editbuttons img {
2341
    float:none !important;
2342
    margin: 0px !important;
2343
}
2344

    
2345
.namecontainer {
2346
    height: 18px;
2347
    margin-top: 9px;
2348
}
2349

    
2350
.nametextbox {
2351
    font-size: 95%;
2352
}
2353

    
2354
.large-spinner {
2355
    background: url("./icons/indicators/large/progress.gif");
2356
    margin-left: 298px;
2357
    margin-top: 0px;
2358
    height: 31px;
2359
    width: 31px;
2360
    position: absolute;
2361
}
2362

    
2363
.list .large-spinner {
2364
    margin-top:-30px;
2365
}
2366

    
2367
.single .large-spinner {
2368
    margin-top: 50px;
2369
}
2370

    
2371
div#networks-container .large-spinner {
2372
    margin-top: 50px;
2373
}
2374

    
2375
/* tables in list view */
2376
div.list div.dataTables_filter {
2377
    font-size: 75%;
2378
    display: none;
2379
    margin-bottom: 12px;
2380
}
2381

    
2382
div.list div.dataTables_filter input{
2383
    font-size: 100%;
2384
}
2385

    
2386
.dataTables_wrapper {
2387
    width: 515px;
2388
    padding-bottom: 40px;
2389
}
2390

    
2391
div.list table thead .sorting, div.list table thead .sorting_desc, div.list table thead .sorting_asc {
2392
    padding-right: 15px !important;
2393
}
2394

    
2395
div.list table {
2396
    width: 515px;
2397
    font-size: 75%;
2398
}
2399

    
2400
div.list table tbody td {
2401
    color: #3D3D3D;
2402
    padding:6px;
2403
    vertical-align: middle;
2404
}
2405

    
2406
div.list table thead tr th {
2407
    background-color: #CDE2EC;
2408
    background-image: url(bg.gif);
2409
    background-repeat: no-repeat;
2410
    background-position: right 11px;
2411
    font-weight: normal;
2412
    border: 1px solid transparent;
2413
    border-bottom: none;
2414
    padding: 4px;
2415
    text-align: left;
2416
    vertical-align: middle;
2417
    cursor: pointer;
2418
}
2419

    
2420
div.list table thead .sorting_asc, div.list table thead .sorting_desc {
2421
    background-color: #5CA1C0;
2422
}
2423

    
2424
div.list table thead .sorting_asc {
2425
    background-image: url(asc.gif);
2426
}
2427

    
2428
div.list table thead .sorting_desc {
2429
    background-image: url(desc.gif);
2430
}
2431

    
2432
div.list table .selection div.expand-icon {
2433
    background-image: url(asc.gif);
2434
    background-repeat: no-repeat;
2435
    position: relative;
2436
    cursor: pointer;
2437
    width: 15px;
2438
    height: 4px;
2439
    left: 19px;
2440
    top: -11px;
2441
}
2442

    
2443
ul.dropdown-selector {
2444
    background-color: #E6EEEE;
2445
    position: absolute;
2446
    margin-left: 1px;
2447
    display: block;
2448
    top: 255px;
2449
    font-size:75%;
2450
    width:40px;
2451
}
2452

    
2453
ul.dropdown-selector li {
2454
    padding: 4px;
2455
}
2456

    
2457
ul.dropdown-selector li:hover {
2458
    background-color: #5CA1C0;
2459
}
2460

    
2461
ul.dropdown-selector li a{
2462
    color: black;
2463
    text-decoration: none;
2464
}
2465

    
2466
div.list table span.imagetag {
2467
    display: none;
2468
}
2469

    
2470
div.list table thead .vmos {
2471
    width: 20px !important;
2472
    vertical-align:middle;
2473
}
2474

    
2475
div.list table .selection {
2476
    width: 20px !important;
2477
    text-align: left;
2478
    background-image: none;
2479
    padding-left: 6px;
2480
}
2481

    
2482
div.list table thead .vmflavor {
2483
    width: 100px !important;
2484
}
2485

    
2486
/* group column commented out for v0.5
2487
div.list table thead .vmgroup {
2488
    width: 40px !important;
2489
}
2490
*/
2491

    
2492
div.list table thead .vmstatus {
2493
    width: 50px !important;
2494
}
2495

    
2496
div.list table thead .vmname {
2497
    width: 110px !important;
2498
}
2499

    
2500
.spinner, .action-indicator {
2501
    clear: right;
2502
    float:right !important;
2503
    margin: 10px 6px 0 15px !important;
2504
}
2505
.action-indicator {
2506
    margin-right: 18px !important;
2507
}
2508

    
2509
.wave {
2510
    clear: right;
2511
    float:right !important;
2512
    margin: 10px 15px 0 15px !important;
2513
}
2514

    
2515
#networks-pane .spinner {
2516
    margin-top: 18px !important;
2517
}
2518

    
2519
.hidden {
2520
    display:none;
2521
}
2522

    
2523
div.actions a.selected, div.actions a.selected:hover, div.machine-actions a.selected, div.machine-actions a.selected:hover {
2524
    display:block !important;
2525
}
2526

    
2527
.action_error .message, .action_error .code {
2528
    display: none;
2529
}
2530

    
2531
.fixed {
2532
    bottom: 0;
2533
    position: fixed !important;
2534
}
2535

    
2536
/* Networks */
2537
#networks-pane {
2538
    background-color: transparent;
2539
    color: black;
2540
    margin-left: 1px;
2541
    margin-right: 0;
2542
}
2543

    
2544
#networkscreate {
2545
    color: black;
2546
    background-color: #FF7F2A;
2547
    cursor: pointer;
2548
    padding: 7px 24px;
2549
    text-decoration: none;
2550
}
2551

    
2552
#networkscreate:hover {
2553
    background-color: #FF9955;
2554
}
2555

    
2556
#networks-pane #beforecreate {
2557
    margin-left: -13px;
2558
    margin-top: -6px;
2559
}
2560

    
2561
#networks-container {
2562
    margin-top: 10px;
2563
    min-height: 270px;
2564
}
2565

    
2566
#networks-createcontainer {
2567
    position: absolute;
2568
    top: 155px;
2569
}
2570

    
2571
#networks-pane .public-networks {
2572
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
2573
    margin: 0 0 18px;
2574
    padding: 70px 0 15px 35px;
2575
}
2576

    
2577
#networks-pane .private-networks {
2578
    background: url("./running-bg.png") repeat scroll 0 0 transparent;
2579
    padding: 15px 20px 20px 35px;
2580
}
2581

    
2582
#public-template, #private-template, #public-machine-template, #private-machine-template {
2583
    display:none;
2584
}
2585

    
2586
div.network a.action-network-add {
2587
    display: none;
2588
}
2589

    
2590
div.network a.action-network-destroy {
2591
    margin-top: 32px !important;
2592
    width: 50px;
2593
    display: none;
2594
}
2595

    
2596
div.network {
2597
    clear: both;
2598
    min-height: 65px;
2599
    margin: 5px 0 0 -35px;
2600
    padding: 3px 20px 0;
2601
    width: 480px;
2602
    position: relative;
2603
}
2604

    
2605
#private-template {
2606
    margin: 2px 0 0 -30px;
2607
}
2608

    
2609
div.network-placeholder {
2610
    margin-left: 33px;
2611
}
2612

    
2613
div.private-networks div.network-placeholder {
2614
    border-left: 3px solid #FF7F2A;
2615
}
2616

    
2617
div.network-cable {
2618
    border-left: 3px solid #FF7F2A;
2619
    float: left;
2620
    margin-left: -40px;
2621
    margin-top: -45px;
2622
    height: 185px;
2623
    overflow: hidden;
2624
}
2625

    
2626
.first div.network-cable {
2627
    height:143px;
2628
    margin-top:-6px;
2629
    position: relative;
2630
}
2631

    
2632
div.network-contents div.machines-list div.first {
2633
    margin-top:0;
2634
}
2635

    
2636
.last div.network-cable {
2637
    height:85px;
2638
}
2639

    
2640
div.firewall-cable {
2641
    border-left: 3px solid #FF7F2A;
2642
    float: left;
2643
    margin-left: -100px;
2644
    margin-top: -20px;
2645
    height: 110px;
2646
}
2647

    
2648
.last div.firewall-cable {
2649
    display:none;
2650
}
2651

    
2652
div.network a:hover {
2653
    text-decoration: underline;
2654
    cursor: pointer;
2655
}
2656

    
2657
#networks-container .name {
2658
    font-size: 75%;
2659
}
2660

    
2661
div.network-machines, div.firewall {
2662
    font-size: 75%;
2663
    margin-left: 70px;
2664
}
2665

    
2666
div.firewall {
2667
    margin-left: 60px;
2668
    margin-bottom: 3px;
2669
}
2670

    
2671
div.machines-header, div.firewall-header {
2672
    background-color: #A1C8DB;
2673
    color: white;
2674
    cursor: pointer;
2675
    height: 17px;
2676
    width: 103px;
2677
}
2678

    
2679
 div.private-networks div.machines-header {
2680
    margin-top: -5px;
2681
}
2682

    
2683
div.network:hover div.machines-header, div.network:hover div.firewall-header {
2684
    background-color: #84b7d0;
2685
}
2686

    
2687
div.network-machine:hover div.firewall-header {
2688
    background-color: #5CA1C0;
2689
}
2690

    
2691
div.machines-label, div.firewall-label {
2692
    width: 100%;
2693
    padding-bottom:1px;
2694
    padding-left: 3px;
2695
}
2696

    
2697
div.firewall-label.darker {
2698
    background-color: #4085a5;
2699
}
2700

    
2701
.state {
2702
    float: right;
2703
    position: absolute;
2704
    right: 10px;
2705
    top: 40px;
2706
    font-size: 75%;
2707
}
2708

    
2709
div.network div.actions {
2710
    float: right;
2711
    font-size: 75%;
2712
    font-weight: normal;
2713
    height: 70px;
2714
    width: 100px;
2715
    position: absolute;
2716
    right: -100px;
2717
    top: 0;
2718
}
2719

    
2720
div.network div.machine-actions {
2721
    text-decoration: none;
2722
    float: right;
2723
    width: 100px;
2724
    margin: -7px -100px 0 0;
2725
    font-weight: normal;
2726
    font-size: 75%;
2727
}
2728

    
2729
div.network div.actions a, div.network div.machine-actions a {
2730
    text-decoration: none;
2731
    height: 15px;
2732
    color: black;
2733
    visibility: hidden;
2734
    display: block;
2735
}
2736

    
2737
div.network div.actions a {
2738
    margin: 4px 0 0 8px;
2739
}
2740

    
2741
div.network div.machine-actions a {
2742
    margin: 8px 0 0 8px;
2743
}
2744

    
2745
div.network div.actions a:hover, div.network div.machine-actions a:hover {
2746
    display: block;
2747
    background-color:#A1C8DB;
2748
    width: 200px;
2749
    opacity: 0.8;
2750
    filter: alpha(opacity = 80);
2751
}
2752

    
2753
div.network:hover div.actions a, div.network-machine:hover div.machine-actions a {
2754
    visibility: visible;
2755
}
2756

    
2757
div.network div.actions a.selected, div.network div.machine-actions a.selected {
2758
    color: #FF7F2A !important;
2759
    width: 50px !important;
2760
}
2761

    
2762
div.network div.actions a.selected:hover, div.network div.machine-actions a.selected:hover {
2763
    background-color: transparent;
2764
}
2765

    
2766
div.network div.display a {
2767
    visibility: visible;
2768
}
2769

    
2770
div.network-machine div.machine-actions a.action-details {
2771
    margin-top: 7px;
2772
}
2773

    
2774
div.network:hover {
2775
    background-color: #A1C8DB !important;
2776
}
2777

    
2778
.network-logos {
2779
    float:left;
2780
    padding-right: 10px;
2781
}
2782

    
2783
.network-logos:hover {
2784
    cursor: pointer;
2785
}
2786

    
2787
.state div {
2788
    text-align: right;
2789
    margin: 4px 1px -4px;
2790
}
2791

    
2792
.public-networks .state div {
2793
    margin-top: 4px;
2794
}
2795

    
2796
.private-networks .state div {
2797
    margin-top: 9px;
2798
    margin-bottom: -12px;
2799
}
2800

    
2801
.public-networks .name-div {
2802
    margin-top:-7px;
2803
    margin-bottom: 23px;
2804
}
2805

    
2806
div.indicator {
2807
    clear: none;
2808
    float: right;
2809
    height: 11px;
2810
    margin: 3px -1px;
2811
    width: 10px;
2812
}
2813

    
2814
#private-networks {
2815
    margin-top: 20px;
2816
}
2817

    
2818
.private-networks .editbuttons {
2819
    margin-right: 22%;
2820
}
2821

    
2822
.private-networks div.confirm_single {
2823
    margin: 45px -219px -5px 0;
2824
    font-size: 80%;
2825
}
2826

    
2827
.private-networks .network-machine div.confirm_single {
2828
    margin: 0 -199px 0 0;
2829
}
2830

    
2831
.private-networks .state {
2832
    top: 35px;
2833
}
2834

    
2835
.private-networks div.machines-list {
2836
    padding-top: 3px;
2837
}
2838

    
2839
span.rename-network, span.configure {
2840
    background-repeat: no-repeat;
2841
    color: transparent;
2842
    font-size: 75%;
2843
    font-weight: normal;
2844
    margin-left: 10px;
2845
    padding-left: 10px;
2846
    text-align: left;
2847
}
2848

    
2849
span.rename-network {
2850
    cursor: pointer;
2851
}
2852

    
2853
div.name-div:hover span.rename-network {
2854
    color: #3D3D3D;
2855
    margin-top: 0.4em;
2856
    background-image: url(./pencil.png);
2857
    background-position: 0 3px;
2858
}
2859

    
2860
div.network:hover a.rename {
2861
    color: #3d3d3d;
2862
}
2863

    
2864
.network-separator {
2865
    background-color: #5CA1C0;
2866
    height: 1px;
2867
    margin: 2px 0 0 -5px;
2868
    width: 480px;
2869
    font-size: 1%;
2870
    line-height: 1px;
2871
}
2872

    
2873
.network-contents {
2874
    margin-left: -4px;
2875
    width: 504px;
2876
    clear: both;
2877
    padding-bottom: 7px;
2878
}
2879

    
2880
.network-machine .state div {
2881
    text-align: left;
2882
}
2883

    
2884
.network-machine {
2885
    margin-left: 35px;
2886
    padding-bottom: 5px;
2887
    padding-left: 5px;
2888
    padding-top: 5px;
2889
    margin-top: 5px;
2890
}
2891

    
2892
.network-machine .logo {
2893
    float:left;
2894
    padding-right: 10px;
2895
    position:relative;
2896
}
2897

    
2898
#networks-container .machine-name {
2899
    text-decoration: none !important;
2900
    margin-bottom: 10px;
2901
    color: #000000;
2902
    margin-top: -4px;
2903
}
2904

    
2905
.private-networks .separator {
2906
    background-color: #5CA1C0;
2907
    height: 1px;
2908
    margin: 3px 0 -2px -10px;
2909
    width: 485px;
2910
}
2911

    
2912
.network-machine .state {
2913
    margin-right: 18px;
2914
}
2915

    
2916
.network-machine .state .status {
2917
    margin-bottom: 4px;
2918
}
2919

    
2920
.machine-name .name {
2921
    margin-top: -10px !important;
2922
}
2923

    
2924
.machine-name .namecontainer {
2925
    line-height: 18px;
2926
    margin-bottom: 20px;
2927
}
2928

    
2929
div.network-machine:hover {
2930
    background-color: #84B7D0;
2931
}
2932

    
2933
.machines {
2934
    width: 416px;
2935
    margin-bottom: -8px;
2936
    margin-top: 10px;
2937
}
2938

    
2939
div.empty-network-slot {
2940
    height: 60px;
2941
}
2942

    
2943
div.network-remove-machine, div.network-add-machine {
2944
    background-color: #FB822F;
2945
    color: #bc4b00;
2946
    width:90px;
2947
    height:18px;
2948
    float:left;
2949
    margin:40px 0 0 -100px;
2950
}
2951

    
2952
span.remove-icon {
2953
    font-size: 80%;
2954
    margin-left: 15px;
2955
}
2956

    
2957
div.add-icon {
2958
    margin-left: 15px;
2959
    margin-top: -3px;
2960
    cursor: pointer;
2961
}
2962

    
2963
span.remove-icon:hover, span.add-icon:hover {
2964
    cursor:pointer;
2965
    color: #fff;
2966
}
2967

    
2968
div.network-add-machine {
2969
    margin:43px 0 0 -3px;
2970
}
2971

    
2972
.firewall-on {
2973
    color: #42E342;
2974
}
2975

    
2976
.firewall-off {
2977
    color: #F82E2E;
2978
}
2979

    
2980
.firewall-content {
2981
    color: black;
2982
    font-size: 60%;
2983
    margin-left: 60px;
2984
    height: 55px;
2985
    margin-bottom: 17px;
2986
}
2987

    
2988
.firewall-content .checkbox-legends {
2989
    vertical-align: text-top;
2990
}
2991

    
2992
.checkbox-legends a {
2993
    color: black;
2994
    text-decoration: underline;
2995
    font-size: 100%;
2996
}
2997

    
2998
h5.machine-connect {
2999
    font-size: 75%;
3000
    margin-bottom: 3px;
3001
}
3002

    
3003
.machine-connect span {
3004
    text-decoration: underline;
3005
}
3006

    
3007
h5.machine-connect span:hover {
3008
    cursor: pointer;
3009
}
3010

    
3011
.firewall-apply {
3012
    background-color: #4085a5;
3013
    border: medium none;
3014
    float: right;
3015
    font-size: 105%;
3016
    height: 18px;
3017
    margin-right: 5px;
3018
    margin-top: 3px;
3019
    width: 75px;
3020
}
3021

    
3022
.firewall-apply:hover {
3023
    background-color:#5CA1C0;
3024
}
3025

    
3026
.name-div {
3027
    margin: -9px 0 30px 70px;
3028
}
3029

    
3030
.machine-name-div {
3031
    margin-bottom: 20px;
3032
    margin-left: 60px;
3033
}
3034

    
3035
div.reboot-dialog {
3036
    display: none;
3037
    color: black;
3038
    background-color: #4085A5;
3039
    font-size: 75%;
3040
    margin-top: 15px;
3041
    width: 698px;
3042
    z-index: 1;
3043
}
3044

    
3045
div#reboot-machine-template, div.reboot-machine-entry {
3046
    display: none;
3047
    padding: 0 0 10px 35px;
3048
    width: 300px;
3049
}
3050

    
3051
div.reboot-dialog p {
3052
    color: #FF7F2A;
3053
    padding: 10px 0 10px 10px;
3054
}
3055

    
3056
div.reboot-dialog button {
3057
    float:right;
3058
    border: 1px solid #FF7F2A;
3059
    background-color: transparent;
3060
    font-size:100%;
3061
}
3062

    
3063
div.reboot-dialog button:hover {
3064
    background-color: #FF7F2A;
3065
}
3066

    
3067
div.reboot-dialog button.reboot-all {
3068
    margin: -30px 35px 0 0;
3069
}
3070

    
3071
div.reboot-dialog button.reboot-single {
3072
    color: black;
3073
    margin-top: -20px;
3074
}
3075

    
3076
div.reboot-dialog div.code, div.reboot-dialog div.action, div.reboot-dialog div.message, div.reboot-dialog button.details {
3077
    display:none;
3078
}
3079

    
3080
div.reboot-dialog button.details {
3081
    border-color: #800000;
3082
    margin-top: -20px;
3083
}
3084

    
3085
div.reboot-dialog button.details:hover {
3086
    background-color: #800000;
3087
}
3088

    
3089
/* Metadata */
3090
.info-content {
3091
    clear: both;
3092
    height: 95px;
3093
    width: 512px;
3094
}
3095

    
3096
.metadata-container {
3097
    line-height: 12px;
3098
    height: 85px;
3099
    background-color: #84b7d0;
3100
}
3101

    
3102
.metadata-column {
3103
    border-right: 1px solid #5CA1C0;
3104
    color: black;
3105
    float: left;
3106
    font-size: 60%;
3107
    margin-top: 3px;
3108
    height: 70px;
3109
    padding-bottom: 5px;
3110
}
3111

    
3112
.vm-stats {
3113
    padding-left: 10px;
3114
    padding-right: 5px;
3115
    width: 220px;
3116
}
3117

    
3118
.vm-stats div.stat-content {
3119
    height: 18px;
3120
}
3121

    
3122
.vm-stats div.stat-content img {
3123
    margin: 0;
3124
}
3125

    
3126
.vm-stats div.stat-content img.busy {
3127
    margin-left: 95px;
3128
}
3129

    
3130
.vm-stats div.stat-error {
3131
    display:none;
3132
}
3133

    
3134
.vm-details {
3135
    width: 130px;
3136
    margin-left:17px;
3137
}
3138

    
3139
.vm-metadata {
3140
    padding-left: 10px;
3141
    width: 100px;
3142
    border: none;
3143
}
3144

    
3145
.metadata-left {
3146
    float:left;
3147
    width: 30px;
3148
    height: 60px;
3149
}
3150

    
3151
.metadata-right {
3152
    width: 73px;
3153
    float:left;
3154
    height: 35px;
3155
    padding-left: 5px;
3156
    position:relative;
3157
    overflow:hidden;
3158
}
3159

    
3160
.metadata-right .items {
3161
    position:absolute;
3162
    height:20000em;
3163
}
3164

    
3165
.metadata-keys-container {
3166
    height: 60px;
3167
    float: left;
3168
}
3169

    
3170
.single .metadata-keys-container {
3171
    float: none;
3172
    height: 50px;
3173
}
3174

    
3175
.single a.manage-metadata {
3176
    font-size: 80%;
3177
    margin-left:4px;
3178
    color: #383838;
3179
}
3180

    
3181
a.manage-metadata, a.stats-report {
3182
    font-size: 100%;
3183
    color: black;
3184
    margin-left:17px;
3185
    text-decoration: underline;
3186
}
3187

    
3188
a.stats-report {
3189
    margin: 15px 0  0 80px;
3190
}
3191

    
3192
div.machine a.manage-metadata:hover {
3193
    background-color: transparent;
3194
}
3195

    
3196
.metadata-actions, .scrollable {
3197
    padding-left: 5px;
3198
}
3199

    
3200
.singe .metadata-actions, .single .scrollable {
3201
    font-size: 80%;
3202
    line-height: 12px;
3203
    width: 300px;
3204
}
3205

    
3206
.metadata-actions .prev,  .metadata-actions .next{
3207
    float:left;
3208
    width:29px;
3209
    height:6px;
3210
    cursor: pointer;
3211
}
3212

    
3213
.metadata-actions .prev {
3214
    background: url("./roll-up.png") no-repeat scroll 0 0 transparent;
3215
}
3216

    
3217
.metadata-actions .next {
3218
    background: url("./roll-down.png") no-repeat scroll 0 0 transparent;
3219
}
3220

    
3221
.scrollable {
3222
    position:relative;
3223
    overflow:hidden;
3224
    height: 35px;
3225
    width: 60px;
3226
    margin-bottom:2px;
3227
}
3228

    
3229
.scrollable .items {
3230
    position:absolute;
3231
    height:20000em;
3232
}
3233

    
3234
/* single view */
3235
.single {
3236
    color: #383838;
3237
    margin-top: -76px;
3238
    padding-bottom: 10px;
3239
    width: 679px;
3240
}
3241

    
3242
.single .column1 {
3243
    float: left;
3244
    margin: 1px 0 25px 17px;
3245
    width: 140px;
3246
}
3247

    
3248
.single .column1 .state {
3249
    float: left;
3250
    margin-left: 4px;
3251
    padding-bottom: 6px;
3252
    padding-top: 3px;
3253
    position: relative;
3254
    right: 0;
3255
    text-align: center;
3256
    width: 126px;
3257
}
3258

    
3259
.single .column1 .state-label {
3260
    padding-top: 5px;
3261
}
3262

    
3263
.single .column1 .indicators {
3264
    margin-right: 38px !important;
3265
}
3266

    
3267
.single div.connect-arrow {
3268
    margin-left: -17px;
3269
}
3270

    
3271
.single div.connect-border {
3272
    margin-left: -29px;
3273
}
3274

    
3275
.single .single-actions {
3276
    padding-bottom: 4px;
3277
    padding-left: 15px;
3278
    width: 69px;
3279
    float: left;
3280
}
3281

    
3282
.single div.single-action {
3283
    font-size: 80%;
3284
    line-height: 18px;
3285
    text-decoration: none;
3286
    cursor: pointer;
3287
}
3288

    
3289
.single div.single-action:hover {
3290
    background-color:#A1C8DB;
3291
    width: 180px;
3292
    opacity: 0.8;
3293
    filter: alpha(opacity = 80);
3294
}
3295

    
3296
.single div.single-action.selected {
3297
    color: #FF7F2A !important;
3298
    width: 50px !important;
3299
}
3300

    
3301
.single div.single-action.selected:hover {
3302
    background-color:transparent;
3303
}
3304

    
3305
.single div.confirm_single {
3306
    font-size: 80%;
3307
    margin: -19px -115px 0 0;
3308
}
3309

    
3310
.single div.action-container.destroy div.confirm_single {
3311
    margin: -18px -116px 0 0;
3312
    position: relative;
3313
    left: 0px;
3314
}
3315

    
3316
.single div.confirm_single button.no {
3317
    margin-left: -5px;
3318
}
3319

    
3320
.single .spinner, .single .action-indicator {
3321
    margin: 15px 45px 0 0px !important
3322
}
3323

    
3324
.single .action-indicator {
3325
    margin-right: 55px !important;
3326
}
3327

    
3328
.single .wave {
3329
    margin: 15px 53px 0 0px !important
3330
}
3331

    
3332
.single div.action_error {
3333
    margin: 2px 0px 0 605px !important;
3334
    position: relative;
3335
}
3336

    
3337
.single .column2 {
3338
    background-color: #A1C8DB;
3339
    float: left;
3340
    font-size: 78%;
3341
    line-height: 17px;
3342
    margin: 0 0 10px 5px;
3343
    width: 358px;
3344
}
3345

    
3346
.single .column2 .machine-labels {
3347
    float: left;
3348
    font-size: 90%;
3349
    margin-left: 10px;
3350
    margin-top: 10px;
3351
    width: 125px;
3352
}
3353

    
3354
.single .column2 .machine-details {
3355
    float: right;
3356
    text-align: right;
3357
    font-size: 90%;
3358
    width: 210px;
3359
    margin-right: 10px;
3360
    margin-top: 10px;
3361
}
3362

    
3363
.single .column2 .name, .single .column2 .disk, .single .column2 .image-size, .single .column2 .ipv6 {
3364
    margin-bottom: 13px;
3365
}
3366

    
3367
.single .tags {
3368
    clear: both;
3369
    margin-bottom: 10px;
3370
    margin-left: 10px;
3371
}
3372

    
3373
.single .tags-label {
3374
    float: left;
3375
    padding: 0 5px;
3376
    width: 30px;
3377
}
3378

    
3379
.single .tags-down-arrow {
3380
    background: url("/static/tags-down-arrow.png") no-repeat scroll 1px 7px transparent;
3381
    float: left;
3382
    height: 16px;
3383
    width: 9px;
3384
}
3385

    
3386
.single .tags-header {
3387
    background-color: #84B7D0;
3388
    cursor: pointer;
3389
    height: 16px;
3390
    width: 55px;
3391
}
3392

    
3393
.single .tags-content {
3394
    background-color: #84B7D0;
3395
    clear: both;
3396
    height: 65px;
3397
    padding-bottom: 5px;
3398
    padding-top: 5px;
3399
    width: 300px;
3400
}
3401

    
3402
.single .column3 {
3403
    background-color: #A1C8DB;
3404
    margin-left: 535px;
3405
    position: absolute;
3406
    top: 280px;
3407
    width: 150px;
3408
    overflow: visible;
3409
    padding-bottom: 10px;
3410
}
3411

    
3412
.single .column3 .controls {
3413
    font-size: 80%;
3414
    height: 20px;
3415
    padding-left: 7px;
3416
    padding-right: 7px;
3417
    padding-top: 8px;
3418
}
3419

    
3420
.single .column3 .previous {
3421
    float:left;
3422
    width: 72px;
3423
}
3424

    
3425
.single .column3 .next {
3426
    float: right;
3427
    text-align: center;
3428
    width: 60px;
3429
}
3430

    
3431
.single .column3 .next-label {
3432
    float: right;
3433
    margin-right: 3px;
3434
    margin-top: -2px;
3435
}
3436

    
3437
.single .column3 .next-arrow {
3438
    float: right;
3439
    height: 18px;
3440
    width: 10px;
3441
    background: url("./right-arrow.png") no-repeat scroll 3px 2px transparent;
3442
}
3443

    
3444
.single .column3 .prev-label {
3445
    float: left;
3446
    margin-left: 3px;
3447
    margin-top: -2px;
3448
}
3449

    
3450
.single .column3 .prev-arrow {
3451
    background: url("./left-arrow.png") no-repeat scroll 3px 2px transparent;
3452
    float: left;
3453
    height: 18px;
3454
    width: 10px;
3455
}
3456

    
3457
.single .column3 .separator {
3458
    width: 135px;
3459
    height: 1px;
3460
    background-color: #84B7D0;
3461
    margin: 0 0 0 7px;
3462
    clear: both;
3463
}
3464

    
3465
.single .column3 .servers {
3466
    font-size: 80%;
3467
    line-height: 15px;
3468
    padding-top: 10px;
3469
    text-align: right;
3470
    overflow: visible;
3471
    position: relative;
3472
}
3473

    
3474
.single .column3 .server-name {
3475
    margin-left: 10px;
3476
    padding-right: 5px;
3477
    cursor: pointer;
3478
    padding-bottom: 2px;
3479
}
3480

    
3481
div.single div.column3 div.server-name:hover, .single .column3 .column3-selected {
3482
    background-color: #84B7D0;
3483
    color: white;
3484
    opacity: 0.8;
3485
    padding-left: 9px;
3486
    text-align: left;
3487
    width: 160px;
3488
    filter: alpha(opacity = 80);
3489
    position: relative;
3490
}
3491

    
3492
.single .toggler {
3493
    color: #FFFFFF;
3494
    float: right;
3495
    font-size: 140%;
3496
}
3497

    
3498
.single .cpu-usage, .single .network-usage {
3499
    text-align: center;
3500
    padding-top: 15px;
3501
    margin-bottom: 5px;
3502
    font-size: 90%;
3503
    font-weight: bold;
3504
}
3505

    
3506
.single .cpu-graph, .single .network-graph {
3507
    margin-left: 20px;
3508
    margin-bottom:30px;
3509
    width: 660px;
3510
}
3511

    
3512
.single div.lower img.stats {
3513
    margin-left: 82px;
3514
}
3515

    
3516
.single .single-image {
3517
    width: 126px;
3518
    margin-bottom: 10px;
3519
    margin-left: 4px;
3520
}
3521

    
3522
.single .column3 .previous, .single .column3 .next {
3523
    cursor: pointer;
3524
    background-color: #84B7D0;
3525
    color: white;
3526
    font-size: 100%;
3527
    height: 15px;
3528
    padding-top: 2px;
3529
}
3530

    
3531
.single .column3 .disabled {
3532
    opacity: 0.5;
3533
    filter: alpha(opacity = 50);
3534
}
3535

    
3536
.single div.lower {
3537
    clear:both;
3538
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
3539
    width: 700px;
3540
    padding-bottom: 15px;
3541
}
3542

    
3543
.single div.upper {
3544
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
3545
    margin-bottom: 10px;
3546
    min-height: 310px;
3547
    overflow: visible;
3548
    padding-top: 60px;
3549
    width: 700px;
3550
}
3551

    
3552
/* console css */
3553
.console-header-logo {
3554
    padding-top: 17px;
3555
    margin-left: 30px;
3556
    position: fixed;
3557
}
3558

    
3559
#console-header div.help-text {
3560
    font-size: 75%;
3561
    font-weight:bold;
3562
    color:#FF7F2A;
3563
    float:left;
3564
    position: absolute;
3565
    margin: 45px 0 0 2px;
3566
}
3567

    
3568
div.console-container {
3569
    margin: 0 0em;
3570
    height: auto;
3571
}
3572

    
3573
#wrapper.console {
3574
    width: auto;
3575
}
3576

    
3577
.console-info {
3578
    font-size:80%;
3579
    color: white;
3580
    float:left;
3581
    position:relative;
3582
    margin: 25px 0 0 480px;
3583
}
3584

    
3585
applet {
3586
    width:100%;
3587
    height:100%;
3588
}
3589

    
3590
div.console-footer {
3591
    /* this is for version 0.5*/
3592
    display: none;
3593
}
3594

    
3595
.console-footer #footer-text{
3596
    float:left;
3597
    left: auto;
3598
    margin-left:30px;
3599
}
3600

    
3601
/* add network wizard (see also #wizard for shared classes) */
3602
#networks-wizard .header {
3603
    background-color: #4085A5;
3604
    height: 56px;
3605
}
3606

    
3607
#networks-wizard div.name-input {
3608
    margin: 75px 0 0 55px;
3609
}
3610

    
3611
#networks-wizard input {
3612
    border: 1px solid #CCCCCC;
3613
    color: #445566;
3614
    letter-spacing: 1px;
3615
    width: 170px;
3616
}
3617

    
3618
#networks-wizard span.help {
3619
    font-style: italic;
3620
    font-size: 80%;
3621
    margin-left: 10px;
3622
}
3623

    
3624
#networks-wizard .separator-end {
3625
    background-color: #387693;
3626
    height: 6px;
3627
    width: 479px;
3628
    margin-left: -13px;
3629
    margin-top: 22px;
3630
}
3631

    
3632
.red {
3633
    color: red;
3634
}
3635

    
3636
/* add server to network wizard (see also #metadata-wizard for shared classes) */
3637
#add-machines-wizard span.machine-name {
3638
    margin-left: 4px;
3639
    vertical-align: text-top;
3640
}
3641

    
3642
#add-machines-wizard img.list-logo {
3643
    margin: 2px 1px 1px;
3644
}
3645

    
3646
.css-panes {
3647
    clear: both;
3648
}
3649

    
3650
.last .firewall-content {
3651
    margin-bottom:13px;
3652
}
3653

    
3654
#pub .last .network-separator {
3655
    display:none;
3656
}
3657

    
3658
.public-networks .empty-network-slot {
3659
    display: none;
3660
}
3661

    
3662
/* float clearing for all browsers except the devil one */
3663
.clearfix:after{
3664
  clear: both;
3665
  content: ".";
3666
  display: block;
3667
  height: 0;
3668
  visibility: hidden;
3669
  font-size: 0;
3670
}
3671

    
3672
#machinesview-list div.action-indicator {
3673
    margin:0 !important;
3674
    float: none !important;
3675
}
3676

    
3677
div.action-indicator {
3678
    width: 15px;
3679
    height: 20px;
3680
    background-repeat: no-repeat;
3681
    background-position: 0 0;
3682
}
3683

    
3684
tbody.machines div.action-indicator {
3685
    position: relative;
3686
    top: -2px;
3687
}
3688
div.state .destroy, tbody.machines .destroy {
3689
    background-image: url("./icons/actions/medium/destroy.png");
3690
}
3691
div.state .start, tbody.machines .start {
3692
    background-image: url("./icons/actions/medium/start.png");
3693
}
3694
div.state .reboot, tbody.machines .reboot {
3695
    background-image: url("./icons/actions/medium/reboot.png");
3696
}
3697
div.state .shutdown, tbody.machines .shutdown {
3698
    background-image: url("./icons/actions/medium/shutdown.png");
3699
}