Statistics
| Branch: | Tag: | Revision:

root / ui / static / main.css @ 6207a478

History | View | Annotate | Download (62.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
}
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
#footer div.grnet-sign {
69
    margin-top:10px;
70
}
71

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
535
#wizard .img-next {
536
    margin-right: -4px;
537
    padding-left: 8px;
538
    margin-bottom: -1px;
539
}
540

    
541
#wizard .img-prev {
542
    margin-left: -4px;
543
    padding-right: 8px;
544
    margin-bottom: -1px;
545
}
546

    
547
#networks-wizard .create {
548
    float:right;
549
    width: 140px;
550
}
551

    
552
#wizard #start:hover, #networks-wizard .create:hover {
553
    background-color: #FF9651;
554
    border-color: #FF9651;
555
}
556

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

    
566
.page ul {
567
    height: 270px;
568
    overflow: auto;
569
}
570

    
571
.panes ul.pane {
572
    height: 220px;
573
}
574

    
575
#wizard #tabscontainer {
576
    background-color: #CDE2EC;
577
    height: 20px;
578
    width: 448px;
579
}
580

    
581
.page ul.tabs {
582
    overflow: hidden;
583
    height: auto;
584
    margin-bottom: -1px;
585
    margin-top: -1px;
586
}
587

    
588
.page ul.tabs li {
589
    float: right;
590
    margin: 0 0.2em;
591
}
592

    
593
#status li {
594
    float: left;
595
    color: #387693;
596
    padding: 0 1px 0 37px;
597
    bottom: 0px;
598
}
599

    
600
#status li.active .headernumber {
601
    color: #FFFFFF;
602
}
603

    
604
#status li.active .headerbody {
605
    color: #FFFFFF;
606
}
607

    
608
div.image-container {
609
    border-bottom: 1px solid #CCCCCC;
610
    margin-left: 10px;
611
    margin-right: 10px;
612
}
613

    
614
#page2-container {
615
    background-color: #ECF4F8;
616
    height: 193px;
617
    margin-top: 3px;
618
    padding-top: 25px;
619
}
620

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

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

    
639
.sliders {
640
    float:left;
641
    width: 40px;
642
    margin-left: 10px;
643
    margin-top: 3px;
644
}
645

    
646
.units {
647
    padding-left:10px;
648
}
649

    
650
.slider-container {
651
    padding-bottom: 15px;
652
    margin-left: 5px;
653
}
654

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

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

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

    
685
.selectedrange {
686
    border-color: #5599FF;
687
}
688

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

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

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

    
716
div.machine:hover {
717
    background-color:#A1C8DB !important;
718
}
719

    
720
div.machine.light-background, div.network.light-background {
721
    background-color:#aed2e3;
722
}
723

    
724
.single .light-background {
725
    background-color:#aed2e3;
726
}
727

    
728
.machine a {
729
    font-weight: normal;
730
    text-decoration: none;
731
}
732

    
733
div.machine-details {
734
    width: 400px;
735
    float:left;
736
}
737

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

    
744
.machine span.name {
745
    font-weight: bold;
746
}
747

    
748
.oldValue {
749
    display:none;
750
}
751

    
752
.state {
753
    margin-top: -40px;
754
}
755

    
756
.state div {
757
    text-align: right;
758
    margin-right: 3px;
759
}
760

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

    
773
div.machine div.actions a {
774
    color: transparent;
775
    height: 15px;
776
    width: 180px;
777
    margin: 0 0 2px 8px;
778
    display: block;
779
}
780

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

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

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

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

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

    
804
div.action-container {
805
    overflow: visible;
806
}
807

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

    
814
div.machine:hover .actions a {
815
    color: black;
816
    display: block;
817
}
818

    
819
div.machine div.display a{
820
    color: black;
821
    display: block;
822
}
823

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

    
828
div.terminated div.machine div.actions .disabled {
829
    display: none;
830
}
831

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

    
837
div.running div.machine div.actions a.action-destroy {
838
    position: absolute;
839
    bottom: 0;
840
}
841

    
842
div.connect-arrow {
843
    background: url(/static/connect-arrow.png) no-repeat;
844
    height: 28px;
845
    width:14px;
846
    position: absolute;
847
}
848

    
849
.machine div.connect-arrow {
850
    display: none;
851
    left: -3px;
852
    position: absolute;
853
    top: 9px;
854
}
855

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

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

    
872
div.connect-border:hover {
873
    cursor: pointer;
874
}
875

    
876
.machine div.connect-border {
877
    display: none;
878
    left: -15px;
879
    position: absolute;
880
    top: 9px;
881
}
882

    
883
.standard .machine img {
884
    float: left;
885
    margin: 4px 14px 0;
886
}
887

    
888
.standard .running .machine img {
889
   cursor: pointer;
890
}
891

    
892
.list .machine img {
893
    margin: 0;
894
}
895

    
896
div.ip, div.ips {
897
    font-size: 75%;
898
    position: relative;
899
    float: right;
900
    top:1px;
901
    right: 18px;
902
}
903

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

    
915
.view-separator {
916
    color:#5F8DD3;
917
}
918

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

    
927
.running-state .indicator1, .running-state .indicator2, .running-state .indicator3, .running-state .indicator4 {
928
    background-color: #447821;
929
}
930

    
931
.rebooting-state .indicator1, .rebooting-state .indicator2, .rebooting-state .indicator3, .rebooting-state .indicator4 {
932
    background-color: #d4aa00;
933
}
934

    
935
.terminated-state .indicator1, .terminated-state .indicator2, .terminated-state .indicator3, .terminated-state .indicator4 {
936
    background-color: #666666;
937
}
938

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

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

    
947
.shutting-state .indicator1, .shutting-state .indicator3 {
948
    background-color: #666666;
949
}
950

    
951
.shutting-state .indicator2, .shutting-state .indicator4 {
952
    background-color: #447821;
953
}
954

    
955
.destroying-state .indicator1, .destroying-state .indicator3 {
956
    background-color: #800000;
957
}
958

    
959
.destroying-state .indicator2, .destroying-state .indicator4 {
960
    background-color: #666666;
961
}
962

    
963
.error-state .indicator1, .error-state .indicator2, .error-state .indicator3, .error-state .indicator4 {
964
    background-color: #800000;
965
}
966

    
967
.build-state .indicator1, .build-state .indicator2, .build-state .indicator3, .build-state .indicator4 {
968
    background-color: #5CA1C0;
969
}
970

    
971
.network-indicator .indicator1, .network-indicator .indicator2, .network-indicator .indicator3, .network-indicator .indicator4 {
972
    background-color: #5CA1C0;
973
}
974

    
975
.terminated {
976
    background: url("./running-bg.png") repeat scroll 0 0 transparent;
977
    margin-bottom: 17px;
978
    margin-top: 15px;
979
    padding-bottom: 15px;
980
    padding-top: 15px;
981
    width: 699px;
982
}
983

    
984
span.rename {
985
    background-repeat: no-repeat;
986
    color: transparent;
987
    font-size: 75%;
988
    font-weight: normal;
989
    margin-left: 10px;
990
    padding-left: 10px;
991
    text-align: left;
992
    cursor: pointer;
993
}
994

    
995
div.name:hover span.rename {
996
    color: #3D3D3D;
997
    margin-top: 0.4em;
998
    background-image: url(./pencil.png);
999
    background-position: 0 3px;
1000
}
1001

    
1002
.machine div.info {
1003
    float:left;
1004
    margin-bottom: 8px;
1005
    margin-top:3px;
1006
}
1007

    
1008
.machine div.info div.info-header {
1009
    background-color: #A1C8DB;
1010
    color: white;
1011
    height: 17px;
1012
    width: 50px;
1013
    cursor: pointer;
1014
}
1015

    
1016
div.machine:hover div.info-header, div.machine:hover div.toggler div.down {
1017
    background-color: #84b7d0;
1018
}
1019

    
1020
div.machine div.info-label.darker, .single div.tags-label.darker, div.network .darker {
1021
    background-color: #5CA1C0;
1022
}
1023

    
1024
.machine div.info div.info-label {
1025
    font-size: 75%;
1026
    height:16px;
1027
    width: 30px;
1028
    padding: 1px 0 0 5px;
1029
}
1030

    
1031
.machine div.info div.toggler, .single div.tags div.toggler, div.network div.toggler {
1032
    position: relative;
1033
    width:15px;
1034
    height:17px;
1035
    margin-top: -11px;
1036
    margin-left: 37px;
1037
}
1038

    
1039
div.network div.toggler {
1040
    margin-left: 87px;
1041
}
1042

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

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

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

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

    
1059
.machine div.info div.up {
1060
    background: url(/static/up-arrow.png) no-repeat scroll 1px 0;
1061
}
1062

    
1063
.single div.tags div.up {
1064
    background: url(/static/up-arrow.png) no-repeat scroll 2px 2px;
1065
}
1066

    
1067
.network div.network-machines div.up {
1068
    background: url(/static/up-arrow.png) no-repeat scroll 2px 2px;
1069
}
1070

    
1071
.network div.network-machine div.firewall div.up {
1072
    background: url(/static/up-arrow.png) no-repeat scroll 2px 2px;
1073
}
1074

    
1075
button {
1076
    background-color: #87AADE;
1077
    border: 1px solid #87AADE;
1078
    color: #FFFFFF;
1079
    cursor: pointer;
1080
    height: 23px;
1081
    width: 120px;
1082
}
1083

    
1084
button.next {
1085
    background-color: #4085A5;
1086
    border-color: #4085A5;
1087
    text-align: right;
1088
}
1089

    
1090
button.next:hover {
1091
    background-color: #7DB4CD;
1092
    border-color: #7DB4CD;
1093
}
1094

    
1095
button.prev {
1096
    background-color: #4085A5;
1097
    border-color: #4085A5;
1098
    margin-left: -1px;
1099
    text-align: left;
1100
}
1101

    
1102
button.prev:hover {
1103
    background-color: #7DB4CD;
1104
    border-color: #7DB4CD;
1105
}
1106

    
1107
.image-logo {
1108
    float: left;
1109
    margin-right: 1em;
1110
    margin-left: 1.5em;
1111
    margin-top: 4px;
1112
}
1113

    
1114
div.image {
1115
    clear: both;
1116
    display: block;
1117
    margin-bottom: 3px;
1118
    margin-top: 3px;
1119
    padding: 5px;
1120
}
1121

    
1122
div#view-select {
1123
    float: right;
1124
    clear: both;
1125
    color: white;
1126
    position: relative;
1127
    right: 5px;
1128
    top: -35px;
1129
    display: none;
1130
    z-index: 1000;
1131
}
1132

    
1133
a#standard, a#list, a#single {
1134
    text-decoration: none;
1135
    height: 15px;
1136
    width: 17px;
1137
    padding: 1px 8px 2px 9px;
1138
}
1139

    
1140
div#view-select a {
1141
    color:#5f8dd3;
1142
}
1143

    
1144
a#list:hover {
1145
    background: #5f8dd3;
1146
}
1147

    
1148
a#standard:active, a#list:active {
1149
    color:white;
1150
}
1151

    
1152
a#standard {
1153
    background: url(./icon-view.png) no-repeat -36px 0;
1154
}
1155

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

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

    
1164
a#standard:hover {
1165
    background: url(./icon-view.png) no-repeat -18px 0;
1166
}
1167

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

    
1172
a#single:hover {
1173
    background: url(./single-view.png) no-repeat -18px 0;
1174
}
1175

    
1176
a#standard.activelink {
1177
    background: url(./icon-view.png) no-repeat 0px 0;
1178
}
1179

    
1180
a#list.activelink {
1181
    background: url(./list-view.png) no-repeat 0px 0;
1182
}
1183

    
1184
a#single.activelink {
1185
    background: url(./single-view.png) no-repeat 0px 0;
1186
}
1187

    
1188
#machinetype {
1189
    background-color: #CDE2EC;
1190
    height: 25px;
1191
    margin-bottom: 0px !important;
1192
}
1193

    
1194
div.machine-type {
1195
    float: left;
1196
    margin: 4px 18px 20px;
1197
}
1198

    
1199
.machine-type .active {
1200
    color: #FFFFFF
1201
}
1202

    
1203
#machinesview {
1204
    min-height: 270px;
1205
    margin-top: 40px;
1206
}
1207

    
1208
.list#machinesview {
1209
    margin-left: -20px;
1210
    display:none;
1211
}
1212

    
1213
#machinesview-list.list {
1214
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
1215
    margin-top: -76px;
1216
    padding-left: 15px;
1217
    padding-top: 76px;
1218
    min-height: 270px;
1219
}
1220

    
1221
#machinesview_content {
1222
    display:none;
1223
}
1224

    
1225
.list-machines {
1226
    min-width: 515px;
1227
}
1228

    
1229
#emptymachineslist {
1230
    background-color: #6BA9C6;
1231
    color: #A0A0A0;
1232
    display: none;
1233
    margin-top: -45px;
1234
    padding: 65px 150px 35px;
1235
    text-align: justify;
1236
}
1237

    
1238
#welcomeheader {
1239
    color:white;
1240
    text-align: center;
1241
}
1242

    
1243
.welcomebody {
1244
    color: white;
1245
    font-size:80%;
1246
}
1247

    
1248
.welcomebody a {
1249
    color: white;
1250
}
1251

    
1252
.welcomefooter {
1253
    color: white;
1254
    font-size:60%;
1255
}
1256

    
1257
.welcomefooter a {
1258
    color: white;
1259
}
1260

    
1261
.emptycreatecontainer {
1262
    margin-left: 430px !important;
1263
    position: absolute;
1264
    margin-top: 5px !important;
1265
    width: 180px;
1266
    background-color: #CCCCCC;
1267
    padding: 5px;
1268
    padding-left: 10px;
1269
}
1270

    
1271
.emptycreate {
1272
    margin: 20px 10px 5px 0 !important;
1273
}
1274

    
1275
#createbody {
1276
    display:none;
1277
    font-size: 80%;
1278
}
1279

    
1280
div.list label img {
1281
    margin: 5px 5px -3px 0;
1282
}
1283

    
1284
div.list label {
1285
    color: #3D3D3D;
1286
    font-size: 75%;
1287
}
1288

    
1289
div.list .state {
1290
    margin-top: 7px;
1291
    margin-right: 10px;
1292
}
1293

    
1294
div.list table tbody {
1295
    margin-top: 8px;
1296
}
1297

    
1298
div.list .stopped {
1299
    margin-top: 8px;
1300
}
1301

    
1302
/* root element for tabs  */
1303
#wizard ul.tabs {
1304
    margin-right: -1px;
1305
    float: right;
1306
}
1307

    
1308
#wizard div.panes {
1309
    height: 247px;
1310
    clear:both;
1311
    margin-top: 3px;
1312
}
1313

    
1314
.typebody {
1315
    font-size: 80%;
1316
    font-weight: normal;
1317
    position: relative;
1318
    top: -3px;
1319
}
1320

    
1321
.typehover {
1322
    color: #FFFFFF;
1323
}
1324

    
1325
#label-name {
1326
    margin-top: 10px;
1327
}
1328

    
1329
/* single tab */
1330
#wizard ul.tabs li {
1331
    margin-bottom: 0;
1332
    list-style-type:none;
1333
    float: left;
1334
}
1335

    
1336
/* link inside the tab. uses a background image */
1337
#wizard ul.tabs a {
1338
    display:block;
1339
    padding: 0.2em 0.5em 0.1em 0.4em;
1340
    text-decoration:none;
1341
    color: #FFFFFF;
1342
    position:relative;
1343
    top:1px;
1344
    outline:0;
1345
    background-color: transparent;
1346
    text-align: center;
1347
    width: 100px;
1348
    white-space: nowrap;
1349
    height: 17px;
1350
}
1351

    
1352
#wizard ul.tabs a:hover {
1353
    color: #FFFFFF;
1354
    background-color:#4085A5;
1355
}
1356

    
1357
/* selected tab */
1358
#wizard ul.tabs a.current {
1359
    color: white;
1360
    background-color: #7DB4CD;
1361
    cursor: default;
1362
}
1363

    
1364
#wizard #standard-images {
1365
    background-color: #ECF4F8;
1366
}
1367

    
1368
div.list div.actions {
1369
    display: none;
1370
    clear: left;
1371
    float: right;
1372
    margin-right: 15px;
1373
    margin-top: 37px;
1374
    text-align: right;
1375
    width: 120px;
1376
}
1377

    
1378
div.list div.actions a {
1379
    clear: left;
1380
    color: #A1A1A1;
1381
    display: block;
1382
    font-size:75%;
1383
    margin-bottom: 2px;
1384
}
1385

    
1386
div.list div.actions a:hover {
1387
    background-color: transparent;
1388
}
1389

    
1390
div.list div.actions a.enabled {
1391
    color: #3D3D3D;
1392
}
1393

    
1394
div.list div.actions a.enabled:hover{
1395
    cursor: pointer;
1396
    color: black;
1397
    text-decoration: underline;
1398
}
1399

    
1400
div.list div.actions a.selected {
1401
    color: #FF7F2A !important;
1402
}
1403

    
1404
input.machine {
1405
    width: 13px;
1406
    height: 13px;
1407
    top: -1px;
1408
    overflow: hidden;
1409
}
1410

    
1411
.description-container {
1412
    display: inline-block;
1413
    position: relative;
1414
    width: 300px;
1415
}
1416

    
1417
#wizard .button-container {
1418
    height: 20px;
1419
}
1420

    
1421
/* metadata editing and add machines to network overlays */
1422
#metadata-wizard, #add-machines-wizard {
1423
    position:absolute !important;
1424
    overflow:hidden;
1425
    width:450px;
1426
    display:none;
1427
    background-color:#fff;
1428
    text-align:left;
1429
    font-size: 80%;
1430
    border-bottom: 5px solid #4085A5;
1431
}
1432

    
1433
#metadata-wizard .close, #add-machines-wizard .close  {
1434
    background-image: url("./close-popup.png");
1435
    cursor: pointer;
1436
    height: 13px;
1437
    position: absolute;
1438
    right: 7px;
1439
    top: 9px;
1440
    width: 13px;
1441
}
1442

    
1443
#metadata-wizard .popup-header, #add-machines-wizard .popup-header {
1444
    background-color: #4085A5;
1445
    color: white;
1446
    font-size: 95%;
1447
    font-weight: normal;
1448
    height: 20px;
1449
    margin-left: -16px;
1450
    margin-top: -16px;
1451
    padding-bottom: 2px;
1452
    padding-left: 30px;
1453
    padding-top: 10px;
1454
    width: 482px;
1455
}
1456

    
1457
#metadata-wizard .popup-title, #metadata-wizard .machine-name, #add-machines-wizard .popup-title, #add-machines-wizard .network-name {
1458
    font-size: 120%;
1459
    padding-bottom: 7px;
1460
    padding-top: 10px;
1461
    float:left;
1462
}
1463

    
1464
#metadata-wizard .popup-title {
1465
    padding-bottom: 0px;
1466
    font-size: 120%;
1467
}
1468

    
1469
#metadata-wizard .name-container {
1470
    display: inline-block;
1471
    clear: both;
1472
}
1473

    
1474
#add-machines-wizard .network-name {
1475
    padding-left: 5px;
1476
}
1477

    
1478
#metadata-wizard .popup-body, #add-machines-wizard .popup-body {
1479
    background-image: url("./meta-wiz-bg.png");
1480
    margin-left: -16px;
1481
    margin-right: -16px;
1482
    margin-top: 1px;
1483
    height: 250px;
1484
    overflow-y: auto;
1485
    overflow-x: hidden;
1486
}
1487

    
1488
#metadata-wizard .popup-body-inner, #add-machines-wizard .popup-body-inner {
1489
    background: url("./meta-wiz-inner-bg.png") repeat-x scroll 0 0 transparent;
1490
    font-size: 80%;
1491
    height: 180px;
1492
    margin-left: 25px;
1493
    margin-top: 10px;
1494
    padding-left: 15px;
1495
    width: 420px;
1496
}
1497

    
1498
#metadata-wizard .popup-separator, #add-machines-wizard .popup-separator {
1499
    background-color: #74AEC9;
1500
    height: 1px;
1501
    width: 402px;
1502
    margin-bottom: 30px;
1503
    clear: left;
1504
    font-size: 1px;
1505
}
1506

    
1507
#metadata-wizard .metadata-pair-template {
1508
    height: 15px;
1509
    padding-top: 2px;
1510
    width: 350px;
1511
}
1512

    
1513
#metadata-wizard div.metadata-pair-template:hover {
1514
    background-color: #74AEC9;
1515
}
1516

    
1517
#metadata-wizard .metadata-container, #add-machines-wizard .machines-container {
1518
    background-color: transparent;
1519
    float: left;
1520
    width: 400px;
1521
    font-size: 120%;
1522
}
1523

    
1524
#metadata-wizard .machine-icon {
1525
    float: left;
1526
    padding-left: 10px;
1527
    padding-right: 3px;
1528
    padding-top: 7px;
1529
}
1530

    
1531
#metadata-wizard .large-spinner, #add-machines-wizard .large-spinner {
1532
    display: block;
1533
    margin: 50px 0 0 185px;
1534
}
1535

    
1536
#metadata-wizard .metadata-key {
1537
    float: left;
1538
    width: 110px;
1539
    padding-left: 5px;
1540
}
1541

    
1542
#metadata-wizard .metadata-value {
1543
    width: auto;
1544
}
1545

    
1546
#metadata-wizard .metadata-add-template {
1547
    background-color: #74AEC9;
1548
    width: 350px;
1549
    position: relative;
1550
    overflow: visible;
1551
}
1552

    
1553
#metadata-wizard #add-meta-value {
1554
    margin-left: 25px;
1555
    width: 150px;
1556
}
1557

    
1558
#metadata-wizard button, #add-machines-wizard button {
1559
    font-size: 80%;
1560
    width: 87px;
1561
    float: right;
1562
    background-color: #5599FF;
1563
    border: 0px solid #5599FF;
1564
    padding: 0;
1565
    text-align: center;
1566
    margin-right: 8px;
1567
}
1568

    
1569
#metadata-wizard .buttons, #add-machines-wizard .buttons {
1570
    border-top: 2px solid #4085A5;
1571
    height: 30px;
1572
    margin-left: 25px;
1573
    margin-right: 40px;
1574
    width: 400px;
1575
    font-size: 120%;
1576
}
1577

    
1578
#metadata-wizard button.save, #add-machines-wizard button.cancel {
1579
    float: left;
1580
    height: 23px;
1581
    margin: 10px 0 0 0;
1582
    width: 87px;
1583
    background-color: #4085A5;
1584
    border-color: #4085A5;
1585
}
1586

    
1587
#metadata-wizard button.save:hover, #add-machines-wizard button.cancel:hover {
1588
    background-color: #7DB4CD;
1589
    border-color: #7DB4CD;
1590
}
1591

    
1592
#metadata-wizard button.create, #add-machines-wizard button.add {
1593
    height: 23px;
1594
    margin: 10px 0 0 0;
1595
    background-color: #FF6600;
1596
    border-color: #FF6600;
1597
}
1598

    
1599
#metadata-wizard button.create:hover, #add-machines-wizard button.add:hover {
1600
    background-color: #FF9651;
1601
    border-color: #FF9651;
1602
}
1603

    
1604
#metadata-wizard .editbuttons {
1605
    margin-top: 4px;
1606
    margin-right: 0;
1607
}
1608

    
1609
#metadata-wizard .vertical-separator {
1610
    height: 17px;
1611
    width: 1px;
1612
    background-color: #74AEC9;
1613
    float:left;
1614
    margin-right: 10px;
1615
}
1616

    
1617
#metadata-wizard h3, #add-machines-wizard h3 {
1618
    font-weight:normal;
1619
}
1620

    
1621
#metadata-wizard .metadata-edit {
1622
    clear: none;
1623
    cursor: pointer;
1624
    float: right;
1625
    margin-right: 0;
1626
    width: 40px;
1627
    margin-top: -14px;
1628
    display:none;
1629
}
1630

    
1631
#metadata-wizard .metadata-edit .edit, #metadata-wizard .metadata-edit .remove {
1632
    background-repeat: no-repeat;
1633
    color: transparent;
1634
    font-size: 75%;
1635
    float: left;
1636
    width: 16px;
1637
    height: 16px;
1638
}
1639

    
1640
#metadata-wizard .addbuttons {
1641
    display: block;
1642
    clear: none;
1643
    width: 40px;
1644
    margin-right: -1px !important;
1645
    margin-top: 2px;
1646
    float:right;
1647
    cursor: pointer;
1648
}
1649

    
1650
.metadata-pair-template .editbuttons {
1651
    margin-top: -19px !important;
1652
    margin-right: -2px !important;
1653
}
1654

    
1655
#metadata-wizard .metadata-edit .edit {
1656
    background-image: url("./meta-edit.png");
1657
    margin-left: 2px;
1658
}
1659

    
1660
#metadata-wizard .metadata-edit .remove, #metadata-wizard .editbuttons .remove {
1661
    background-image: url("./meta-remove.png");
1662
    margin-left: 4px;
1663
    background-repeat: no-repeat;
1664
    color: transparent;
1665
    font-size: 75%;
1666
    height: 16px;
1667
    width: 16px;
1668
    float: left;
1669
}
1670

    
1671
#metadata-wizard .editbuttons .save {
1672
    background-image: url("./meta-save.png");
1673
    padding-top:0;
1674
}
1675

    
1676
#metadata-wizard .addbuttons .cancel {
1677
    background-image: url("./meta-remove.png");
1678
    margin-left: 3px;
1679
}
1680

    
1681
#metadata-wizard .addbuttons .save {
1682
    background-image: url("./meta-save.png");
1683
    margin-left: 1px;
1684
}
1685

    
1686
#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 {
1687
    background-color: #4287a7;
1688
}
1689

    
1690
#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 {
1691
    background-color: #74AEC9;
1692
}
1693

    
1694
#metadata-wizard .addbuttons .cancel, #metadata-wizard .addbuttons .save {
1695
    width: 16px;
1696
    height: 16px;
1697
    float: left;
1698
    background-repeat: no-repeat;
1699
    color: transparent;
1700
}
1701

    
1702
#metadata-wizard .metatextbox {
1703
    font-size: 90%;
1704
    height: 18px;
1705
    margin-top: -2px;
1706
    color: black;
1707
    width: 150px;
1708
}
1709

    
1710
#metadata-wizard p, #add-machines-wizard p {
1711
    margin-left: 7px;
1712
    width: 200px;
1713
}
1714

    
1715
#metadata-wizard div.bottomruler, #add-machines-wizard div.bottomruler {
1716
    background-color: #666;
1717
    height: 20px;
1718
    margin-top: 17px;
1719
}
1720

    
1721
#metadata-wizard button.remove {
1722
    height: 15px;
1723
    width: 70px;
1724
    background-color: #d35f5f;
1725
    border-color: #d35f5f;
1726
}
1727

    
1728
#metadata-wizard button.edit {
1729
    height: 15px;
1730
    width: 70px;
1731
    background-color: #666;
1732
    border-color: #666;
1733
    margin-top: -12px;
1734
}
1735

    
1736
#metadata-wizard input {
1737
    font-style: italic;
1738
    color: #ccc;
1739
}
1740

    
1741
#metadata-wizard textarea.edit-meta-value {
1742
    font-style: normal;
1743
    text-align: left;
1744
    color: black;
1745
    margin-top: 2px;
1746
    width:200px;
1747
    height: 49px;
1748
}
1749

    
1750
#metadata-wizard input {
1751
    font-size: 80%;
1752
}
1753

    
1754
#metadata-wizard input.key {
1755
    height: 15px;
1756
    left: 460px;
1757
    position: absolute;
1758
    top: 83px;
1759
    width: 230px;
1760
}
1761

    
1762
#metadata-wizard textarea.value {
1763
    width: 267px;
1764
    height: 170px;
1765
    overflow: auto;
1766
}
1767

    
1768
#metadata-wizard .input-enabled {
1769
    color: black;
1770
    text-align: left;
1771
    font-style: normal;
1772
}
1773

    
1774
#metadata-wizard label.meta-value {
1775
    vertical-align: top;
1776
}
1777

    
1778
#metadata-wizard button.cancel, #metadata-wizard #edit-dialog button.close {
1779
    float: left;
1780
    margin: 4px 0 0 25px;
1781
    background-color: #d35f5f;
1782
    border-color: #d35f5f;
1783
}
1784

    
1785
/* metadata dropdown combo */
1786
.meta-key {
1787
    margin-right: 18px;
1788
    float:left;
1789
}
1790
#metadata-wizard .textdropdown-outer {
1791
    float: left;
1792
    overflow: visible;
1793
}
1794

    
1795
#metadata-wizard .textdropdown-btn {
1796
    background: url("./dropdown-arrow.gif") no-repeat scroll center center transparent;
1797
    cursor: pointer;
1798
    float: right;
1799
    left: 90px;
1800
    margin-top: 4px;
1801
    position: absolute;
1802
    width: 20px;
1803
}
1804

    
1805
#metadata-wizard ul {
1806
    border: 1px solid #ccc;
1807
    padding: 0px;
1808
    list-style: none;
1809
    margin: 0px;
1810
    background-color: white;
1811
    height: auto !important;
1812
    padding-left: 5px;
1813
    width: 103px !important;
1814
    position: relative;
1815
}
1816

    
1817
#metadata-wizard ul li {
1818
    clear: both;
1819
    display: block;
1820
    float: right;
1821
    list-style: none outside none;
1822
    margin-bottom: 0 !important;
1823
    margin-left: 0 !important;
1824
    padding-bottom: 2px;
1825
    padding-right: 2px;
1826
    padding-top: 2px;
1827
    width: 100%;
1828
}
1829

    
1830
#metadata-wizard ul li:hover {
1831
    background-color: #efefef;
1832
    cursor: pointer;
1833
}
1834

    
1835
#metadata-wizard .dropdownitem {
1836
    margin-left: 10px;
1837
}
1838

    
1839
#metadata-wizard #txtdropdown:focus {
1840
    outline: 0 none;
1841
}
1842

    
1843
#metadata-wizard #add-meta-key {
1844
    height: 16px;
1845
    margin-left: 5px;
1846
    margin-top: 2px;
1847
    width: 105px !important;
1848
}
1849

    
1850
/* notification box */
1851
#yes-no {
1852
    height: 150px;
1853
    z-index: 9999;
1854
    border-bottom: 5px solid #4085A5;
1855
}
1856

    
1857
#yes-no p, #yes-no button {
1858
    margin-top: 15px;
1859
}
1860

    
1861
#error-success {
1862
    z-index: 9999;
1863
    border-bottom: 5px solid #4085A5;
1864
    min-height: 150px;
1865
    top: 120px !important;
1866
    position: absolute !important;
1867
}
1868

    
1869
#error-success p {
1870
    margin-top: 5px;
1871
}
1872

    
1873
#error-success strong {
1874
    color: #F49C1A;
1875
}
1876

    
1877
#error-success .close {
1878
    background-image: url("./close-popup.png");
1879
    cursor: pointer;
1880
    height: 13px;
1881
    position: absolute;
1882
    right: 7px;
1883
    top: 9px;
1884
    width: 13px;
1885
}
1886

    
1887
.popup-header-error {
1888
    background-color: #800000 !important;
1889
}
1890

    
1891
.popup-border-error {
1892
    border-color: #800000 !important;
1893
}
1894

    
1895
.popup-details-error {
1896
    border: none !important;
1897
}
1898

    
1899
.popup-separator-error {
1900
    margin-bottom: 5px !important;
1901
}
1902

    
1903
#error-success .popup-header {
1904
    background-color: #4085A5;
1905
    color: white;
1906
    font-size: 95%;
1907
    font-weight: normal;
1908
    height: 20px;
1909
    margin-left: -16px;
1910
    margin-top: -16px;
1911
    padding-bottom: 2px;
1912
    padding-left: 30px;
1913
    padding-top: 10px;
1914
    width: 482px;
1915
}
1916

    
1917

    
1918
#error-success.success h3 span.header-box{
1919
    background-color: #71c837;
1920
    display: block;
1921
    background-image: url("./save-green.png");
1922
    background-position: right 0;
1923
    background-repeat: no-repeat;
1924
    width: 80px;
1925
    padding: 3px 3px 3px 8px;
1926
    margin-top: -6px;
1927
    font-size: 90% !important;
1928
    margin-left: -11px;
1929
}
1930

    
1931
#error-success .popup-body {
1932
    background: url("./popup-bg.png") repeat-x scroll 0 0 transparent;
1933
    margin-left: -16px;
1934
    margin-right: -16px;
1935
    margin-top: 1px;
1936
    min-height: 142px;
1937
    padding-top: 10px;
1938
}
1939

    
1940
#error-success .popup-body-inner {
1941
    background: url("./popup-inner-bg.png") repeat-x scroll 0 0 transparent;
1942
    font-size: 80%;
1943
    min-height: 120px;
1944
    margin-left: 20px;
1945
    padding-left: 15px;
1946
    width: 460px;
1947
}
1948

    
1949
#error-success .popup-separator {
1950
    background-color: #74AEC9;
1951
    height: 1px;
1952
    width: 442px;
1953
    margin-bottom: 30px;
1954
}
1955

    
1956
#error-success .machine-now-building {
1957
    font-size: 95%;
1958
    padding-bottom: 7px;
1959
    padding-top: 10px;
1960
}
1961

    
1962
#error-success.success .machine-now-building {
1963
    padding-bottom: 14px !important;
1964
}
1965

    
1966
#error-success .password-container {
1967
    width: 430px;
1968
    padding: 5px;
1969
    border: 2px solid #75b54a;
1970
    background-color: #aade87;
1971
}
1972

    
1973
#error-success .password-header {
1974
    margin-bottom: 5px;
1975
}
1976

    
1977
#error-success .password {
1978
    color: #447821;
1979
}
1980

    
1981
#error-success .popup-details {
1982
    border: 2px solid #FF7F2A;
1983
    float: left;
1984
    margin-left: 10px;
1985
    padding: 2px;
1986
}
1987

    
1988
#error-success.success .popup-details {
1989
    border: none !important;
1990
    float: none !important;
1991
    margin-left: none !important;
1992
    margin-top: 10px;
1993
}
1994

    
1995
#error-success.success .popup-separator {
1996
    margin-bottom: 14px !important;
1997
}
1998

    
1999
#error-success .write-password {
2000
    margin-bottom: 5px;
2001
    padding-left: 30px;
2002
}
2003

    
2004
#error-success .write-password-password {
2005
    padding-left: 30px;
2006
    color: #447821;
2007
    display: inline;
2008
    font-size: 110%;
2009
    font-weight: bold;
2010
}
2011

    
2012
#error-success .write-password-details {
2013
    font-size: 75%;
2014
}
2015

    
2016
.more-details {
2017
    display: block;
2018
}
2019

    
2020
.popup-details a:link, .popup-details a:visited{
2021
    color: black;
2022
}
2023

    
2024
/* Confirmation boxes */
2025
div.confirm_single, div.confirm_multiple, div.action_error {
2026
    display: none;
2027
    color: black;
2028
}
2029

    
2030
div.action-container.destroy div.confirm_single {
2031
    bottom: 0;
2032
    position: absolute;
2033
    left: 83px;
2034
}
2035

    
2036
div.terminated div.action-container.destroy div.confirm_single {
2037
    margin-top: 30px;
2038
}
2039

    
2040
div.confirm_single button, div.confirm_multiple button, div.action_error button {
2041
    font-size: 100%;
2042
    cursor: pointer;
2043
    color: black;
2044
    height: 20px !important;
2045
}
2046

    
2047
div.confirm_single {
2048
    float: right;
2049
    margin: -20px -122px 0 0;
2050
}
2051

    
2052
div.confirm_single button {
2053
    border: none;
2054
}
2055

    
2056
div.confirm_single button.yes {
2057
    width: 90px;
2058
    background-color:#FF7F2A;
2059
}
2060

    
2061
div.confirm_single button.yes:hover {
2062
    background-color: #FF9955;
2063
}
2064

    
2065
div.confirm_single button.no {
2066
    width: 20px;
2067
    margin-left:-5px;
2068
    background-color: #FF9955;
2069
    color:#d95d0a;
2070
}
2071

    
2072
div.confirm_single button.no:hover {
2073
    color: white;
2074
}
2075

    
2076
div.confirm_multiple {
2077
    background-color: #4085A5;
2078
    font-size: 75%;
2079
    z-index: 1;
2080
    position: absolute;
2081
    width: 698px;
2082
    height: 28px;
2083
    margin-top: 15px;
2084
}
2085

    
2086
div.confirm_multiple p {
2087
    float: left;
2088
    color: #FF7F2A;
2089
    font-weight: bold;
2090
    margin: 7px 0 0 200px;
2091
}
2092

    
2093
#networks-pane div.confirm_multiple p {
2094
    margin: 7px 0 0 100px;
2095
}
2096

    
2097
div.confirm_multiple button {
2098
    float: right;
2099
    background-color: transparent;
2100
    border: 1px solid #5CA1C0;
2101
    margin: 4px 5px 0 0;
2102
}
2103

    
2104
div.confirm_multiple button.yes {
2105
    border-color: #FF7F2A;
2106
    padding: 0 12px;
2107
}
2108

    
2109
div.confirm_multiple button.yes:hover {
2110
    background-color: #FF7F2A;
2111
}
2112

    
2113
div.confirm_multiple button.no {
2114
    padding: 0px 16px;
2115
}
2116

    
2117
div.confirm_multiple button.no:hover {
2118
    background-color: #5CA1C0;
2119
}
2120

    
2121
div.action_error {
2122
    width: 80px;
2123
    height: 60px;
2124
    padding: 5px;
2125
    margin: -2px 0 0 595px;
2126
    background-color: #4085A5;
2127
    font-size: 75%;
2128
    line-height: 1.5;
2129
    z-index:1;
2130
    color: #FF7F2A;
2131
    position:absolute;
2132
    top: 0px;
2133
}
2134

    
2135
.action_error button {
2136
    width: 80px !important;
2137
    background-color: transparent;
2138
    border: 1px solid;
2139
    padding: 0px;
2140
    border-color: #FF7F2A;
2141
}
2142

    
2143
div.action_error button.details {
2144
    margin: 5px 0 0 0px;
2145
    padding: 0 15px;
2146
}
2147

    
2148
div.action_error button.details:hover {
2149
    background-color: #FF7F2A;
2150
}
2151

    
2152
div#aboutuser{
2153
    float:right;
2154
    clear: both;
2155
    color: #FFFFFF;
2156
    font-size: 75%;
2157
    margin-top: -25px;
2158
}
2159

    
2160
div#user{
2161
    float:right;
2162
    clear: both;
2163
    color: #FFFFFF;
2164
    font-size: 75%;
2165
    margin-top: 43px;
2166
}
2167

    
2168
div#user a{
2169
    color: #FFFFFF;
2170
    text-decoration: none;
2171
}
2172

    
2173
div#user a.current_lang {
2174
    color: #72ADC8;
2175
}
2176

    
2177
.separator {
2178
    background-color: #74AEC9;
2179
    height: 10px;
2180
    width: 700px;
2181
    font-size: 1px;
2182
    line-height: 0px;
2183
}
2184

    
2185
#disks.separator {
2186
    background-color: #dea842;
2187
}
2188

    
2189
#networks.separator {
2190
    background-color: #6c535d;
2191
}
2192

    
2193
.network-machine h5 {
2194
    margin-bottom: 26px;
2195
    margin-top:0px;
2196
}
2197

    
2198
.machine-container .separator {
2199
    width: 508px;
2200
    height: 1px;
2201
    margin-top: 2px;
2202
    background-color: #5CA1C0;
2203
    margin-left: 13px;
2204
}
2205

    
2206
.machine h5 {
2207
    margin: -3px 0px 4px 0px;
2208
}
2209

    
2210
.machine h5.namecontainer {
2211
    margin-top: 1px;
2212
}
2213

    
2214
.editbuttons {
2215
    display: block;
2216
    clear: none;
2217
    width: 40px;
2218
    margin-right: 32%;
2219
    padding-top: 2px;
2220
    float: right;
2221
    cursor: pointer;
2222
    position: relative;
2223
    z-index: 1000;
2224
}
2225

    
2226
div.editbuttons div.save:hover, div.editbuttons div.cancel:hover {
2227
    background-color: #84b7d0;
2228
}
2229

    
2230
div.editbuttons div.cancel:hover {
2231
    background-image: url("./cancel-onhover.png");
2232
}
2233

    
2234
.editbuttons .cancel, .editbuttons .save {
2235
    background-repeat: no-repeat;
2236
    color: transparent;
2237
    height: 16px;
2238
    width: 16px;
2239
    float: left;
2240
}
2241

    
2242
.editbuttons .cancel {
2243
    background-image: url("./cancel.png");
2244
    margin-left: 3px;
2245
}
2246

    
2247
.editbuttons .save {
2248
    background-image: url("./save.png");
2249
    margin-left: 1px;
2250
}
2251

    
2252
.editbuttons img {
2253
    float:none !important;
2254
    margin: 0px !important;
2255
}
2256

    
2257
.namecontainer {
2258
    height: 18px;
2259
    margin-top: 9px;
2260
}
2261

    
2262
.nametextbox {
2263
    font-size: 95%;
2264
}
2265

    
2266
.large-spinner {
2267
    background: url("./icons/indicators/large/progress.gif");
2268
    margin-left: 298px;
2269
    margin-top: 0px;
2270
    height: 31px;
2271
    width: 31px;
2272
    position: absolute;
2273
}
2274

    
2275
.list .large-spinner {
2276
    margin-top:-30px;
2277
}
2278

    
2279
.single .large-spinner {
2280
    margin-top: 50px;
2281
}
2282

    
2283
div#networks-container .large-spinner {
2284
    margin-top: 50px;
2285
}
2286

    
2287
/* tables in list view */
2288
div.list div.dataTables_filter {
2289
    font-size: 75%;
2290
    display: none;
2291
    margin-bottom: 12px;
2292
}
2293

    
2294
div.list div.dataTables_filter input{
2295
    font-size: 100%;
2296
}
2297

    
2298
.dataTables_wrapper {
2299
    width: 515px;
2300
    padding-bottom: 40px;
2301
}
2302

    
2303
div.list table thead .sorting, div.list table thead .sorting_desc, div.list table thead .sorting_asc {
2304
    padding-right: 15px !important;
2305
}
2306

    
2307
div.list table {
2308
    width: 515px;
2309
    font-size: 75%;
2310
}
2311

    
2312
div.list table tbody td {
2313
    color: #3D3D3D;
2314
    padding:6px;
2315
    vertical-align: middle;
2316
}
2317

    
2318
div.list table thead tr th {
2319
    background-color: #CDE2EC;
2320
    background-image: url(bg.gif);
2321
    background-repeat: no-repeat;
2322
    background-position: right 11px;
2323
    font-weight: normal;
2324
    border: 1px solid transparent;
2325
    border-bottom: none;
2326
    padding: 4px;
2327
    text-align: left;
2328
    vertical-align: middle;
2329
    cursor: pointer;
2330
}
2331

    
2332
div.list table thead .sorting_asc, div.list table thead .sorting_desc {
2333
    background-color: #5CA1C0;
2334
}
2335

    
2336
div.list table thead .sorting_asc {
2337
    background-image: url(asc.gif);
2338
}
2339

    
2340
div.list table thead .sorting_desc {
2341
    background-image: url(desc.gif);
2342
}
2343

    
2344
div.list table .selection div.expand-icon {
2345
    background-image: url(asc.gif);
2346
    background-repeat: no-repeat;
2347
    position: relative;
2348
    cursor: pointer;
2349
    width: 15px;
2350
    height: 4px;
2351
    left: 19px;
2352
    top: -11px;
2353
}
2354

    
2355
ul.dropdown-selector {
2356
    background-color: #E6EEEE;
2357
    position: absolute;
2358
    margin-left: 1px;
2359
    display: block;
2360
    top: 255px;
2361
    font-size:75%;
2362
    width:40px;
2363
}
2364

    
2365
ul.dropdown-selector li {
2366
    padding: 4px;
2367
}
2368

    
2369
ul.dropdown-selector li:hover {
2370
    background-color: #5CA1C0;
2371
}
2372

    
2373
ul.dropdown-selector li a{
2374
    color: black;
2375
    text-decoration: none;
2376
}
2377

    
2378
div.list table span.imagetag {
2379
    display: none;
2380
}
2381

    
2382
div.list table thead .vmos {
2383
    width: 20px !important;
2384
    vertical-align:middle;
2385
}
2386

    
2387
div.list table .selection {
2388
    width: 20px !important;
2389
    text-align: left;
2390
    background-image: none;
2391
    padding-left: 6px;
2392
}
2393

    
2394
div.list table thead .vmflavor {
2395
    width: 100px !important;
2396
}
2397

    
2398
div.list table thead .vmgroup {
2399
    width: 40px !important;
2400
}
2401

    
2402
div.list table thead .vmstatus {
2403
    width: 50px !important;
2404
}
2405

    
2406
div.list table thead .vmname {
2407
    width: 70px !important;
2408
}
2409

    
2410
.spinner {
2411
    clear: right;
2412
    float:right !important;
2413
    margin: 10px 6px 0 15px !important;
2414
}
2415

    
2416
.wave {
2417
    clear: right;
2418
    float:right !important;
2419
    margin: 10px 15px 0 15px !important;
2420
}
2421

    
2422
#networks-pane .spinner {
2423
    margin-top: 18px !important;
2424
}
2425

    
2426
.hidden {
2427
    display:none;
2428
}
2429

    
2430
div.actions a.selected, div.actions a.selected:hover, div.machine-actions a.selected, div.machine-actions a.selected:hover {
2431
    display:block !important;
2432
}
2433

    
2434
.action_error .message, .action_error .code {
2435
    display: none;
2436
}
2437

    
2438
.fixed {
2439
    bottom: 0;
2440
    position: fixed !important;
2441
}
2442

    
2443
/* Networks */
2444
#networks-pane {
2445
    background-color: transparent;
2446
    color: black;
2447
    margin-left: 1px;
2448
    margin-right: 0;
2449
}
2450

    
2451
#networkscreate {
2452
    color: black;
2453
    background-color: #FF7F2A;
2454
    cursor: pointer;
2455
    padding: 7px 24px;
2456
    text-decoration: none;
2457
}
2458

    
2459
#networkscreate:hover {
2460
    background-color: #FF9955;
2461
}
2462

    
2463
#networks-pane #beforecreate {
2464
    margin-left: -13px;
2465
    margin-top: -6px;
2466
}
2467

    
2468
#networks-container {
2469
    margin-top: 10px;
2470
    min-height: 270px;
2471
}
2472

    
2473
#networks-createcontainer {
2474
    position: absolute;
2475
    top: 155px;
2476
}
2477

    
2478
#networks-pane .public-networks {
2479
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
2480
    margin: 0 0 18px;
2481
    padding: 70px 0 15px 35px;
2482
}
2483

    
2484
#networks-pane .private-networks {
2485
    background: url("./running-bg.png") repeat scroll 0 0 transparent;
2486
    padding: 15px 20px 20px 35px;
2487
}
2488

    
2489
#public-template, #private-template, #public-machine-template, #private-machine-template {
2490
    display:none;
2491
}
2492

    
2493
div.network a.action-network-add {
2494
    display: none;
2495
}
2496

    
2497
div.network a.action-network-destroy {
2498
    margin-top: 32px !important;
2499
    width: 50px;
2500
    display: none;
2501
}
2502

    
2503
div.network {
2504
    clear: both;
2505
    min-height: 65px;
2506
    margin: 5px 0 0 -35px;
2507
    padding: 3px 20px 0;
2508
    width: 480px;
2509
    position: relative;
2510
}
2511

    
2512
#private-template {
2513
    margin: 2px 0 0 -30px;
2514
}
2515

    
2516
div.network-placeholder {
2517
    margin-left: 33px;
2518
}
2519

    
2520
div.private-networks div.network-placeholder {
2521
    border-left: 3px solid #FF7F2A;
2522
}
2523

    
2524
div.network-cable {
2525
    border-left: 3px solid #FF7F2A;
2526
    float: left;
2527
    margin-left: -40px;
2528
    margin-top: -45px;
2529
    height: 185px;
2530
    overflow: hidden;
2531
}
2532

    
2533
.first div.network-cable {
2534
    height:143px;
2535
    margin-top:-6px;
2536
}
2537

    
2538
div.network-contents div.machines-list div.first {
2539
    margin-top:0;
2540
}
2541

    
2542
.last div.network-cable {
2543
    height:85px;
2544
}
2545

    
2546
div.firewall-cable {
2547
    border-left: 3px solid #FF7F2A;
2548
    float: left;
2549
    margin-left: -100px;
2550
    margin-top: -20px;
2551
    height: 110px;
2552
}
2553

    
2554
.last div.firewall-cable {
2555
    display:none;
2556
}
2557

    
2558
div.network a:hover {
2559
    text-decoration: underline;
2560
    cursor: pointer;
2561
}
2562

    
2563
#networks-container .name {
2564
    font-size: 75%;
2565
}
2566

    
2567
div.network-machines, div.firewall {
2568
    font-size: 75%;
2569
    margin-left: 70px;
2570
}
2571

    
2572
div.firewall {
2573
    margin-left: 60px;
2574
}
2575

    
2576
div.machines-header, div.firewall-header {
2577
    background-color: #A1C8DB;
2578
    color: white;
2579
    cursor: pointer;
2580
    height: 17px;
2581
    width: 100px;
2582
}
2583

    
2584
 div.private-networks div.machines-header {
2585
    margin-top: -5px;
2586
}
2587

    
2588
div.network:hover div.machines-header, div.network:hover div.firewall-header {
2589
    background-color: #84b7d0;
2590
}
2591

    
2592
div.network-machine:hover div.firewall-header {
2593
    background-color: #5CA1C0;
2594
}
2595

    
2596
div.machines-label, div.firewall-label {
2597
    width: 83px;
2598
    padding-bottom:1px;
2599
    padding-left: 3px;
2600
}
2601

    
2602
div.firewall-label.darker {
2603
    background-color: #4085a5;
2604
}
2605

    
2606
.state {
2607
    float: right;
2608
    position: absolute;
2609
    right: 10px;
2610
    top: 40px;
2611
    font-size: 75%;
2612
}
2613

    
2614
div.network div.actions {
2615
    float: right;
2616
    font-size: 75%;
2617
    font-weight: normal;
2618
    height: 70px;
2619
    width: 100px;
2620
    position: absolute;
2621
    right: -100px;
2622
    top: 0;
2623
}
2624

    
2625
div.network div.machine-actions {
2626
    text-decoration: none;
2627
    float: right;
2628
    width: 100px;
2629
    margin: -7px -100px 0 0;
2630
    font-weight: normal;
2631
    font-size: 75%;
2632
}
2633

    
2634
div.network div.actions a, div.network div.machine-actions a {
2635
    text-decoration: none;
2636
    height: 15px;
2637
    color: transparent;
2638
    display: block;
2639
}
2640

    
2641
div.network div.actions a {
2642
    margin: -2px 0 0 8px;
2643
}
2644

    
2645
div.network div.machine-actions a {
2646
    margin: 0 0 0 8px;
2647
}
2648

    
2649
div.network div.actions a:hover, div.network div.machine-actions a:hover {
2650
    display: block;
2651
    background-color:#A1C8DB;
2652
    width: 200px;
2653
    opacity: 0.8;
2654
    filter: alpha(opacity = 80);
2655
}
2656

    
2657
div.network:hover div.actions a, div.network-machine:hover div.machine-actions a {
2658
    color: black;
2659
}
2660

    
2661
div.network div.actions a.selected, div.network div.machine-actions a.selected {
2662
    color: #FF7F2A !important;
2663
    width: 50px !important;
2664
}
2665

    
2666
div.network div.actions a.selected:hover, div.network div.machine-actions a.selected:hover {
2667
    background-color: transparent;
2668
}
2669

    
2670
div.network div.display a {
2671
    color: black;
2672
    display: block;
2673
}
2674

    
2675
div.network-machine div.machine-actions a.action-details {
2676
    margin-top: 7px;
2677
}
2678

    
2679
div.network:hover {
2680
    background-color: #A1C8DB !important;
2681
}
2682

    
2683
.network-logos {
2684
    float:left;
2685
    padding-right: 10px;
2686
}
2687

    
2688
.network-logos:hover {
2689
    cursor: pointer;
2690
}
2691

    
2692
.state div {
2693
    text-align: right;
2694
    margin: 4px 1px -4px;
2695
}
2696

    
2697
.public-networks .state div {
2698
    margin-top: 4px;
2699
}
2700

    
2701
.private-networks .state div {
2702
    margin-top: 9px;
2703
    margin-bottom: -12px;
2704
}
2705

    
2706
.public-networks .name-div {
2707
    margin-top:-7px;
2708
    margin-bottom: 23px;
2709
}
2710

    
2711
div.indicator {
2712
    clear: none;
2713
    float: right;
2714
    height: 11px;
2715
    margin: 3px -1px;
2716
    width: 10px;
2717
}
2718

    
2719
#private-networks {
2720
    margin-top: 20px;
2721
}
2722

    
2723
.private-networks .editbuttons {
2724
    margin-right: 22%;
2725
}
2726

    
2727
.private-networks div.confirm_single {
2728
    margin: 43px -219px 0 0;
2729
    font-size: 80%;
2730
}
2731

    
2732
.private-networks .network-machine div.confirm_single {
2733
    margin: -8px -199px 0 0;
2734
}
2735

    
2736
span.rename-network, span.configure {
2737
    background-repeat: no-repeat;
2738
    color: transparent;
2739
    font-size: 75%;
2740
    font-weight: normal;
2741
    margin-left: 10px;
2742
    padding-left: 10px;
2743
    text-align: left;
2744
}
2745

    
2746
span.rename-network {
2747
    cursor: pointer;
2748
}
2749

    
2750
div.name-div:hover span.rename-network {
2751
    color: #3D3D3D;
2752
    margin-top: 0.4em;
2753
    background-image: url(./pencil.png);
2754
    background-position: 0 3px;
2755
}
2756

    
2757
div.network:hover a.rename {
2758
    color: #3d3d3d;
2759
}
2760

    
2761
.network-separator {
2762
    background-color: #5CA1C0;
2763
    height: 1px;
2764
    margin: 2px 0 0 -5px;
2765
    width: 480px;
2766
    font-size: 4px;
2767
    line-height: 1px;
2768
}
2769

    
2770
.network-contents {
2771
    margin-left: -4px;
2772
    width: 504px;
2773
    clear: both;
2774
    padding-bottom: 7px;
2775
}
2776

    
2777
.network-machine .state div {
2778
    text-align: left;
2779
}
2780

    
2781
.network-machine {
2782
    margin-left: 35px;
2783
    padding-bottom: 5px;
2784
    padding-left: 5px;
2785
    padding-top: 5px;
2786
    margin-top: 5px;
2787
}
2788

    
2789
.network-machine .logo {
2790
    float:left;
2791
    padding-right: 10px;
2792
    position:relative;
2793
}
2794

    
2795
#networks-container .machine-name {
2796
    text-decoration: none !important;
2797
    margin-bottom: 10px;
2798
    color: #000000;
2799
    margin-top: -4px;
2800
}
2801

    
2802
.network .separator {
2803
    background-color: #5CA1C0;
2804
    height: 1px;
2805
    margin: 11px 0 -5px 5px;
2806
    width: 485px;
2807
}
2808

    
2809
.network-machine .state {
2810
    margin-right: 18px;
2811
}
2812

    
2813
.network-machine .state .status {
2814
    margin-bottom: 4px;
2815
}
2816

    
2817
.machine-name .name {
2818
    margin-top: -10px !important;
2819
}
2820

    
2821
.machine-name .namecontainer {
2822
    line-height: 18px;
2823
    margin-bottom: 20px;
2824
}
2825

    
2826
div.network-machine:hover {
2827
    background-color: #84B7D0;
2828
}
2829

    
2830
.machines {
2831
    width: 416px;
2832
    margin-bottom: -8px;
2833
    margin-top: 10px;
2834
}
2835

    
2836
div.empty-network-slot {
2837
    height: 60px;
2838
}
2839

    
2840
div.network-remove-machine, div.network-add-machine {
2841
    background-color: #FB822F;
2842
    color: #bc4b00;
2843
    width:90px;
2844
    height:18px;
2845
    float:left;
2846
    margin:40px 0 0 -100px;
2847
}
2848

    
2849
span.remove-icon {
2850
    font-size: 80%;
2851
    margin-left: 15px;
2852
}
2853

    
2854
div.add-icon {
2855
    margin-left: 15px;
2856
    margin-top: -3px;
2857
    cursor: pointer;
2858
}
2859

    
2860
span.remove-icon:hover, span.add-icon:hover {
2861
    cursor:pointer;
2862
    color: #fff;
2863
}
2864

    
2865
div.network-add-machine {
2866
    margin:43px 0 0 -3px;
2867
}
2868

    
2869
.firewall-on {
2870
    color: #42E342;
2871
}
2872

    
2873
.firewall-off {
2874
    color: #F82E2E;
2875
}
2876

    
2877
.firewall-content {
2878
    color: black;
2879
    font-size: 60%;
2880
    margin-left: 60px;
2881
    height: 55px;
2882
}
2883

    
2884
.firewall-content .checkbox-legends {
2885
    vertical-align: text-top;
2886
}
2887

    
2888
.checkbox-legends a {
2889
    color: black;
2890
    text-decoration: underline;
2891
    font-size: 100%;
2892
}
2893

    
2894
h5.machine-connect {
2895
    font-size: 75%;
2896
    margin-bottom: 3px;
2897
}
2898

    
2899
.machine-connect span {
2900
    text-decoration: underline;
2901
}
2902

    
2903
h5.machine-connect span:hover {
2904
    cursor: pointer;
2905
}
2906

    
2907
.firewall-apply {
2908
    background-color: #4085a5;
2909
    border: medium none;
2910
    float: right;
2911
    font-size: 105%;
2912
    height: 18px;
2913
    margin-right: 5px;
2914
    margin-top: 3px;
2915
    width: 75px;
2916
}
2917

    
2918
.first .firewall-apply {
2919
    margin-top: -1px;
2920
}
2921

    
2922
.firewall-apply:hover {
2923
    background-color:#5CA1C0;
2924
}
2925

    
2926
.name-div {
2927
    margin-left: 70px;
2928
    margin-bottom: 20px;
2929
}
2930

    
2931
.machine-name-div {
2932
    margin-bottom: 20px;
2933
    margin-left: 60px;
2934
}
2935

    
2936
div.reboot-dialog {
2937
    display: none;
2938
    color: black;
2939
    background-color: #4085A5;
2940
    font-size: 75%;
2941
    margin-top: 15px;
2942
    width: 698px;
2943
    z-index: 1;
2944
}
2945

    
2946
div#reboot-machine-template, div.reboot-machine-entry {
2947
    display: none;
2948
    padding: 0 0 10px 35px;
2949
    width: 300px;
2950
}
2951

    
2952
div.reboot-dialog p {
2953
    color: #FF7F2A;
2954
    padding: 10px 0 10px 10px;
2955
}
2956

    
2957
div.reboot-dialog button {
2958
    float:right;
2959
    border: 1px solid #FF7F2A;
2960
    background-color: transparent;
2961
    font-size:100%;
2962
}
2963

    
2964
div.reboot-dialog button:hover {
2965
    background-color: #FF7F2A;
2966
}
2967

    
2968
div.reboot-dialog button.reboot-all {
2969
    margin: -30px 35px 0 0;
2970
}
2971

    
2972
div.reboot-dialog button.reboot-single {
2973
    color: black;
2974
    margin-top: -20px;
2975
}
2976

    
2977
div.reboot-dialog div.code, div.reboot-dialog div.action, div.reboot-dialog div.message, div.reboot-dialog button.details {
2978
    display:none;
2979
}
2980

    
2981
div.reboot-dialog button.details {
2982
    border-color: #800000;
2983
    margin-top: -20px;
2984
}
2985

    
2986
div.reboot-dialog button.details:hover {
2987
    background-color: #800000;
2988
}
2989

    
2990
/* Metadata */
2991
.info-content {
2992
    clear: both;
2993
    height: 95px;
2994
    width: 512px;
2995
}
2996

    
2997
.metadata-container {
2998
    line-height: 12px;
2999
    height: 85px;
3000
    background-color: #84b7d0;
3001
}
3002

    
3003
.metadata-column {
3004
    border-right: 1px solid #5CA1C0;
3005
    color: black;
3006
    float: left;
3007
    font-size: 60%;
3008
    margin-top: 3px;
3009
    height: 70px;
3010
    padding-bottom: 5px;
3011
}
3012

    
3013
.vm-stats {
3014
    padding-left: 10px;
3015
    padding-right: 5px;
3016
    width: 119px;
3017
}
3018

    
3019
.vm-details {
3020
    width: 169px;
3021
    margin-left:17px;
3022
}
3023

    
3024
.vm-metadata {
3025
    padding-left: 10px;
3026
    width: 129px;
3027
    border: none;
3028
}
3029

    
3030
.metadata-left {
3031
    float:left;
3032
    width: 50px;
3033
    height: 60px;
3034
}
3035

    
3036
.metadata-right {
3037
    width: 73px;
3038
    float:left;
3039
    height: 35px;
3040
    padding-left: 5px;
3041
    position:relative;
3042
    overflow:hidden;
3043
}
3044

    
3045
.metadata-right .items {
3046
    position:absolute;
3047
    height:20000em;
3048
}
3049

    
3050
.metadata-keys-container {
3051
    height: 60px;
3052
    float: left;
3053
}
3054

    
3055
.single .metadata-keys-container {
3056
    float: none;
3057
    height: 50px;
3058
}
3059

    
3060
.single a.manage-metadata {
3061
    font-size: 80%;
3062
    margin-left:4px;
3063
    color: #383838;
3064
}
3065

    
3066
a.manage-metadata {
3067
    font-size: 100%;
3068
    color: black;
3069
    margin-left:17px;
3070
    text-decoration: underline;
3071
}
3072

    
3073
div.machine a.manage-metadata:hover {
3074
    background-color: transparent;
3075
}
3076

    
3077
.metadata-actions, .scrollable {
3078
    padding-left: 5px;
3079
}
3080

    
3081
.singe .metadata-actions, .single .scrollable {
3082
    font-size: 80%;
3083
    line-height: 12px;
3084
    width: 300px;
3085
}
3086

    
3087
.metadata-actions .prev,  .metadata-actions .next{
3088
    float:left;
3089
    width:29px;
3090
    height:6px;
3091
    cursor: pointer;
3092
}
3093

    
3094
.metadata-actions .prev {
3095
    background: url("./roll-up.png") no-repeat scroll 0 0 transparent;
3096
}
3097

    
3098
.metadata-actions .next {
3099
    background: url("./roll-down.png") no-repeat scroll 0 0 transparent;
3100
}
3101

    
3102
.scrollable {
3103
    position:relative;
3104
    overflow:hidden;
3105
    height: 35px;
3106
    width: 60px;
3107
    margin-bottom:2px;
3108
}
3109

    
3110
.scrollable .items {
3111
    position:absolute;
3112
    height:20000em;
3113
}
3114

    
3115
.metadata-bar {
3116
    float: right !important;
3117
    margin: 1px 7px 0 !important;
3118
}
3119

    
3120
/* single view */
3121
.single {
3122
    color: #383838;
3123
    margin-top: -76px;
3124
    padding-bottom: 10px;
3125
    width: 679px;
3126
}
3127

    
3128
.single .column1 {
3129
    float: left;
3130
    margin: 1px 0 25px 17px;
3131
    width: 140px;
3132
}
3133

    
3134
.single .column1 .state {
3135
    float: left;
3136
    margin-left: 4px;
3137
    padding-bottom: 6px;
3138
    padding-top: 3px;
3139
    position: relative;
3140
    right: 0;
3141
    text-align: center;
3142
    width: 126px;
3143
}
3144

    
3145
.single .column1 .state-label {
3146
    padding-top: 5px;
3147
}
3148

    
3149
.single .column1 .indicators {
3150
    margin-right: 38px !important;
3151
}
3152

    
3153
.single div.connect-arrow {
3154
    margin-left: -17px;
3155
}
3156

    
3157
.single div.connect-border {
3158
    margin-left: -29px;
3159
}
3160

    
3161
.single .single-actions {
3162
    padding-bottom: 4px;
3163
    padding-left: 15px;
3164
    width: 69px;
3165
    float: left;
3166
}
3167

    
3168
.single div.single-action {
3169
    font-size: 80%;
3170
    line-height: 18px;
3171
    text-decoration: none;
3172
    cursor: pointer;
3173
}
3174

    
3175
.single div.single-action:hover {
3176
    background-color:#A1C8DB;
3177
    width: 180px;
3178
    opacity: 0.8;
3179
    filter: alpha(opacity = 80);
3180
}
3181

    
3182
.single div.single-action.selected {
3183
    color: #FF7F2A !important;
3184
    width: 50px !important;
3185
}
3186

    
3187
.single div.single-action.selected:hover {
3188
    background-color:transparent;
3189
}
3190

    
3191
.single div.confirm_single {
3192
    font-size: 80%;
3193
    margin: -19px -115px 0 0;
3194
}
3195

    
3196
.single div.action-container.destroy div.confirm_single {
3197
    margin: -18px -116px 0 0;
3198
    position: relative;
3199
    left: 0px;
3200
}
3201

    
3202
.single div.confirm_single button.no {
3203
    margin-left: -5px;
3204
}
3205

    
3206
.single .spinner {
3207
    margin: 15px 45px 0 0px !important
3208
}
3209

    
3210
.single .wave {
3211
    margin: 15px 53px 0 0px !important
3212
}
3213

    
3214
.single div.action_error {
3215
    margin: 2px 0px 0 605px !important;
3216
    position: relative;
3217
}
3218

    
3219
.single .column2 {
3220
    background-color: #A1C8DB;
3221
    float: left;
3222
    font-size: 78%;
3223
    line-height: 17px;
3224
    margin: 0 0 10px 5px;
3225
    width: 358px;
3226
}
3227

    
3228
.single .column2 .machine-labels {
3229
    float: left;
3230
    font-size: 90%;
3231
    margin-left: 10px;
3232
    margin-top: 10px;
3233
    width: 125px;
3234
}
3235

    
3236
.single .column2 .machine-details {
3237
    float: right;
3238
    text-align: right;
3239
    font-size: 90%;
3240
    width: 210px;
3241
    margin-right: 10px;
3242
    margin-top: 10px;
3243
}
3244

    
3245
.single .column2 .name, .single .column2 .disk, .single .column2 .image-size, .single .column2 .ipv6 {
3246
    margin-bottom: 13px;
3247
}
3248

    
3249
.single .tags {
3250
    clear: both;
3251
    margin-bottom: 10px;
3252
    margin-left: 10px;
3253
}
3254

    
3255
.single .tags-label {
3256
    float: left;
3257
    padding: 0 5px;
3258
    width: 30px;
3259
}
3260

    
3261
.single .tags-down-arrow {
3262
    background: url("/static/tags-down-arrow.png") no-repeat scroll 1px 7px transparent;
3263
    float: left;
3264
    height: 16px;
3265
    width: 9px;
3266
}
3267

    
3268
.single .tags-header {
3269
    background-color: #84B7D0;
3270
    cursor: pointer;
3271
    height: 16px;
3272
    width: 55px;
3273
}
3274

    
3275
.single .tags-content {
3276
    background-color: #84B7D0;
3277
    clear: both;
3278
    height: 65px;
3279
    padding-bottom: 5px;
3280
    padding-top: 5px;
3281
    width: 300px;
3282
}
3283

    
3284
.single .column3 {
3285
    background-color: #A1C8DB;
3286
    margin-left: 535px;
3287
    position: absolute;
3288
    top: 280px;
3289
    width: 150px;
3290
    overflow: visible;
3291
    padding-bottom: 10px;
3292
}
3293

    
3294
.single .column3 .controls {
3295
    font-size: 80%;
3296
    height: 20px;
3297
    padding-left: 7px;
3298
    padding-right: 7px;
3299
    padding-top: 8px;
3300
}
3301

    
3302
.single .column3 .previous {
3303
    float:left;
3304
    width: 72px;
3305
}
3306

    
3307
.single .column3 .next {
3308
    float: right;
3309
    text-align: center;
3310
    width: 60px;
3311
}
3312

    
3313
.single .column3 .next-label {
3314
    float: right;
3315
    margin-right: 3px;
3316
    margin-top: -2px;
3317
}
3318

    
3319
.single .column3 .next-arrow {
3320
    float: right;
3321
    height: 18px;
3322
    width: 10px;
3323
    background: url("./right-arrow.png") no-repeat scroll 3px 2px transparent;
3324
}
3325

    
3326
.single .column3 .prev-label {
3327
    float: left;
3328
    margin-left: 3px;
3329
    margin-top: -2px;
3330
}
3331

    
3332
.single .column3 .prev-arrow {
3333
    background: url("./left-arrow.png") no-repeat scroll 3px 2px transparent;
3334
    float: left;
3335
    height: 18px;
3336
    width: 10px;
3337
}
3338

    
3339
.single .column3 .separator {
3340
    width: 135px;
3341
    height: 1px;
3342
    background-color: #84B7D0;
3343
    margin: 0 0 0 7px;
3344
    clear: both;
3345
}
3346

    
3347
.single .column3 .servers {
3348
    font-size: 80%;
3349
    line-height: 15px;
3350
    padding-top: 10px;
3351
    text-align: right;
3352
    overflow: visible;
3353
    position: relative;
3354
}
3355

    
3356
.single .column3 .server-name {
3357
    margin-left: 10px;
3358
    padding-right: 5px;
3359
    cursor: pointer;
3360
    padding-bottom: 2px;
3361
}
3362

    
3363
div.single div.column3 div.server-name:hover, .single .column3 .column3-selected {
3364
    background-color: #84B7D0;
3365
    color: white;
3366
    opacity: 0.8;
3367
    padding-left: 9px;
3368
    text-align: left;
3369
    width: 160px;
3370
    filter: alpha(opacity = 80);
3371
    position: relative;
3372
}
3373

    
3374
.single .toggler {
3375
    color: #FFFFFF;
3376
    float: right;
3377
    font-size: 140%;
3378
}
3379

    
3380
.single .single-cpu, .single .single-network {
3381
    float: left;
3382
    height: 100px;
3383
    width: 48%;
3384
}
3385

    
3386
.single .cpu-usage, .single .network-usage {
3387
    padding-bottom: 15px;
3388
    padding-left: 20px;
3389
    padding-top: 15px;
3390
    font-size: 90%;
3391
}
3392

    
3393
.single .cpu-graph, .single .network-graph {
3394
    background-color: #A1C8DB;
3395
    height: 210px;
3396
    margin-left: 20px;
3397
    width: 300px;
3398
}
3399

    
3400
.single .single-image {
3401
    width: 126px;
3402
    margin-bottom: 10px;
3403
    margin-left: 4px;
3404
}
3405

    
3406
.single .column3 .previous, .single .column3 .next {
3407
    cursor: pointer;
3408
    background-color: #84B7D0;
3409
    color: white;
3410
    font-size: 100%;
3411
    height: 15px;
3412
    padding-top: 2px;
3413
}
3414

    
3415
.single .column3 .disabled {
3416
    opacity: 0.5;
3417
    filter: alpha(opacity = 50);
3418
}
3419

    
3420
.single div.lower {
3421
    clear:both;
3422
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
3423
    width: 700px;
3424
    height: 270px;
3425
}
3426

    
3427
.single div.upper {
3428
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
3429
    margin-bottom: 10px;
3430
    min-height: 310px;
3431
    overflow: visible;
3432
    padding-top: 60px;
3433
    width: 700px;
3434
}
3435

    
3436
/* console css */
3437
.console-header-logo {
3438
    padding-top: 17px;
3439
    margin-left: 30px;
3440
    position: fixed;
3441
}
3442

    
3443
#console-header div.help-text {
3444
    font-size: 75%;
3445
    font-weight:bold;
3446
    color:#FF7F2A;
3447
    float:left;
3448
    position: absolute;
3449
    margin: 45px 0 0 2px;
3450
}
3451

    
3452
div.console-container {
3453
    margin: 0 0em;
3454
    height: auto;
3455
}
3456

    
3457
#wrapper.console {
3458
    width: auto;
3459
}
3460

    
3461
.console-info {
3462
    font-size:80%;
3463
    color: white;
3464
    float:left;
3465
    position:relative;
3466
    margin: 25px 0 0 480px;
3467
}
3468

    
3469
applet {
3470
    width:100%;
3471
    height:100%;
3472
}
3473

    
3474
div.console-footer {
3475
    /* this is for version 0.5*/
3476
    display: none;
3477
}
3478

    
3479
.console-footer #footer-text{
3480
    float:left;
3481
    left: auto;
3482
    margin-left:30px;
3483
}
3484

    
3485
/* add network wizard (see also #wizard for shared classes) */
3486
#networks-wizard .header {
3487
    background-color: #4085A5;
3488
    height: 56px;
3489
}
3490

    
3491
#networks-wizard div.name-input {
3492
    margin: 75px 0 0 55px;
3493
}
3494

    
3495
#networks-wizard input {
3496
    border: 1px solid #CCCCCC;
3497
    color: #445566;
3498
    letter-spacing: 1px;
3499
    width: 170px;
3500
}
3501

    
3502
#networks-wizard span.help {
3503
    font-style: italic;
3504
    font-size: 80%;
3505
    margin-left: 10px;
3506
}
3507

    
3508
#networks-wizard .separator-end {
3509
    background-color: #387693;
3510
    height: 6px;
3511
    width: 479px;
3512
    margin-left: -13px;
3513
    margin-top: 22px;
3514
}
3515

    
3516
.red {
3517
    color: red;
3518
}
3519

    
3520
/* add server to network wizard (see also #metadata-wizard for shared classes) */
3521
#add-machines-wizard span.machine-name {
3522
    margin-left: 4px;
3523
    vertical-align: text-top;
3524
}
3525

    
3526
#add-machines-wizard img.list-logo {
3527
    margin: 2px 1px 1px;
3528
}
3529

    
3530
.css-panes {
3531
    clear: both;
3532
}
3533

    
3534
.last .firewall-content {
3535
    margin-bottom:13px;
3536
}
3537

    
3538
#pub .last .network-separator {
3539
    display:none;
3540
}
3541

    
3542
.public-networks .empty-network-slot {
3543
    display: none;
3544
}
3545

    
3546
/* float clearing for all browsers except the devil one */
3547
.clearfix:after{
3548
  clear: both;
3549
  content: ".";
3550
  display: block;
3551
  height: 0;
3552
  visibility: hidden;
3553
  font-size: 0;
3554
}
3555