Statistics
| Branch: | Tag: | Revision:

root / ui / static / main.css @ 278e0fb1

History | View | Annotate | Download (62.8 kB)

1
html, body, div, span, applet, object, iframe,
2
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
3
a, abbr, acronym, address, big, cite, code,
4
del, dfn, em, font, img, ins, kbd, q, s, samp,
5
small, strike, strong, sub, sup, tt, var,
6
b, u, i, center,
7
dl, dt, dd, ol, ul, li,
8
fieldset, form, label, legend,
9
table, caption, tbody, tfoot, thead, tr, th, td {
10
    margin: 0;
11
    padding: 0;
12
    border: 0;
13
    font-size: 100%;
14
    vertical-align: baseline;
15
    background: transparent;
16
    font-family: Verdana, 'PT Sans', sans-serif;
17
}
18

    
19
html {
20
    height: 100%;
21
}
22

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

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

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

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

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

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

    
68
#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: 0 -4px -1px 8px;
537
}
538

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
815
div.machine div.display a{
816
    color: black;
817
    display: block;
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
}
899

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
1022
div.network div.toggler {
1023
    margin-left: 87px;
1024
}
1025

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
1525
#metadata-wizard .metadata-value {
1526
    width: auto;
1527
}
1528

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
1733
#metadata-wizard input {
1734
    font-size: 80%;
1735
}
1736

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

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

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

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

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

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

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

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

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

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

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

    
1822
#metadata-wizard #txtdropdown:focus {
1823
    outline: 0 none;
1824
}
1825

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

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

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

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

    
1852
#error-success p {
1853
    margin-top: 5px;
1854
}
1855

    
1856
#error-success strong {
1857
    color: #F49C1A;
1858
}
1859

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

    
1870
.popup-header-error {
1871
    background-color: #800000 !important;
1872
}
1873

    
1874
.popup-border-error {
1875
    border-color: #800000 !important;
1876
}
1877

    
1878
.popup-details-error {
1879
    border: none !important;
1880
}
1881

    
1882
.popup-separator-error {
1883
    margin-bottom: 5px !important;
1884
}
1885

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

    
1900

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

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

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

    
1932
#error-success .popup-separator {
1933
    background-color: #74AEC9;
1934
    height: 1px;
1935
    font-size:1%;
1936
    width: 442px;
1937
    margin-bottom: 30px;
1938
}
1939

    
1940
#error-success .machine-now-building {
1941
    font-size: 95%;
1942
    padding-bottom: 7px;
1943
    padding-top: 10px;
1944
}
1945

    
1946
#error-success.success .machine-now-building {
1947
    padding-bottom: 14px !important;
1948
}
1949

    
1950
#error-success .password-container {
1951
    width: 430px;
1952
    padding: 5px;
1953
    border: 2px solid #75b54a;
1954
    background-color: #aade87;
1955
}
1956

    
1957
#error-success .password-header {
1958
    margin-bottom: 5px;
1959
}
1960

    
1961
#error-success .password {
1962
    color: #447821;
1963
}
1964

    
1965
#error-success .popup-details {
1966
    border: 2px solid #FF7F2A;
1967
    float: left;
1968
    margin-left: 10px;
1969
    padding: 2px;
1970
}
1971

    
1972
#error-success.success .popup-details {
1973
    border: none !important;
1974
    float: none !important;
1975
    margin-left: none !important;
1976
    margin-top: 10px;
1977
}
1978

    
1979
#error-success.success .popup-separator {
1980
    margin-bottom: 14px !important;
1981
}
1982

    
1983
#error-success .write-password {
1984
    margin-bottom: 5px;
1985
    padding-left: 30px;
1986
}
1987

    
1988
#error-success .write-password-password {
1989
    padding-left: 30px;
1990
    color: #447821;
1991
    display: inline;
1992
    font-size: 110%;
1993
    font-weight: bold;
1994
}
1995

    
1996
#error-success .write-password-details {
1997
    font-size: 75%;
1998
}
1999

    
2000
.more-details {
2001
    display: block;
2002
}
2003

    
2004
.popup-details a:link, .popup-details a:visited{
2005
    color: black;
2006
}
2007

    
2008
/* Confirmation boxes */
2009
div.confirm_single, div.confirm_multiple, div.action_error {
2010
    display: none;
2011
    color: black;
2012
}
2013

    
2014
div.action-container.destroy div.confirm_single {
2015
    bottom: 0;
2016
    position: absolute;
2017
    left: 83px;
2018
}
2019

    
2020
div.terminated div.action-container.destroy div.confirm_single {
2021
    margin-top: 30px;
2022
}
2023

    
2024
div.confirm_single button, div.confirm_multiple button, div.action_error button {
2025
    font-size: 100%;
2026
    cursor: pointer;
2027
    color: black;
2028
    height: 20px !important;
2029
}
2030

    
2031
div.confirm_single {
2032
    float: right;
2033
    margin: -20px -122px 0 0;
2034
}
2035

    
2036
div.confirm_single button {
2037
    border: none;
2038
}
2039

    
2040
div.confirm_single button.yes {
2041
    width: 90px;
2042
    background-color:#FF7F2A;
2043
}
2044

    
2045
div.confirm_single button.yes:hover {
2046
    background-color: #FF9955;
2047
}
2048

    
2049
div.confirm_single button.no {
2050
    width: 20px;
2051
    margin-left:-5px;
2052
    background-color: #FF9955;
2053
    color:#d95d0a;
2054
}
2055

    
2056
div.confirm_single button.no:hover {
2057
    color: white;
2058
}
2059

    
2060
div.confirm_multiple {
2061
    background-color: #4085A5;
2062
    font-size: 75%;
2063
    z-index: 1;
2064
    position: absolute;
2065
    width: 698px;
2066
    height: 28px;
2067
    margin-top: 15px;
2068
}
2069

    
2070
div.confirm_multiple p {
2071
    float: left;
2072
    color: #FF7F2A;
2073
    font-weight: bold;
2074
    margin: 7px 0 0 200px;
2075
}
2076

    
2077
#networks-pane div.confirm_multiple p {
2078
    margin: 7px 0 0 100px;
2079
}
2080

    
2081
div.confirm_multiple button {
2082
    float: right;
2083
    background-color: transparent;
2084
    border: 1px solid #5CA1C0;
2085
    margin: 4px 5px 0 0;
2086
}
2087

    
2088
div.confirm_multiple button.yes {
2089
    border-color: #FF7F2A;
2090
    padding: 0 12px;
2091
}
2092

    
2093
div.confirm_multiple button.yes:hover {
2094
    background-color: #FF7F2A;
2095
}
2096

    
2097
div.confirm_multiple button.no {
2098
    padding: 0px 16px;
2099
}
2100

    
2101
div.confirm_multiple button.no:hover {
2102
    background-color: #5CA1C0;
2103
}
2104

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

    
2119
.action_error button {
2120
    width: 80px !important;
2121
    background-color: transparent;
2122
    border: 1px solid;
2123
    padding: 0px;
2124
    border-color: #FF7F2A;
2125
}
2126

    
2127
div.action_error button.details {
2128
    margin: 5px 0 0 0px;
2129
    padding: 0 15px;
2130
}
2131

    
2132
div.action_error button.details:hover {
2133
    background-color: #FF7F2A;
2134
}
2135

    
2136
div#aboutuser{
2137
    float:right;
2138
    clear: both;
2139
    color: #FFFFFF;
2140
    font-size: 75%;
2141
    margin-top: -25px;
2142
}
2143

    
2144
div#user{
2145
    float:right;
2146
    clear: both;
2147
    color: #FFFFFF;
2148
    font-size: 75%;
2149
    margin-top: 43px;
2150
}
2151

    
2152
div#user a{
2153
    color: #FFFFFF;
2154
    text-decoration: none;
2155
}
2156

    
2157
div#user a.current_lang {
2158
    color: #72ADC8;
2159
}
2160

    
2161
.separator {
2162
    background-color: #74AEC9;
2163
    height: 10px;
2164
    width: 700px;
2165
    font-size: 1px;
2166
    line-height: 0px;
2167
}
2168

    
2169
#disks.separator {
2170
    background-color: #dea842;
2171
}
2172

    
2173
#networks.separator {
2174
    background-color: #6c535d;
2175
}
2176

    
2177
.network-machine h5 {
2178
    margin-bottom: 26px;
2179
    margin-top:0px;
2180
}
2181

    
2182
.machine-container .separator {
2183
    width: 508px;
2184
    height: 1px;
2185
    margin-top: 2px;
2186
    background-color: #5CA1C0;
2187
    margin-left: 13px;
2188
}
2189

    
2190
.machine h5 {
2191
    margin: -3px 0px 4px 0px;
2192
}
2193

    
2194
.machine h5.namecontainer {
2195
    margin-top: 1px;
2196
}
2197

    
2198
.editbuttons {
2199
    display: block;
2200
    clear: none;
2201
    width: 40px;
2202
    margin-right: 32%;
2203
    padding-top: 2px;
2204
    float: right;
2205
    cursor: pointer;
2206
    position: relative;
2207
    z-index: 1000;
2208
}
2209

    
2210
div.editbuttons div.save:hover, div.editbuttons div.cancel:hover {
2211
    background-color: #84b7d0;
2212
}
2213

    
2214
div.editbuttons div.cancel:hover {
2215
    background-image: url("./cancel-onhover.png");
2216
}
2217

    
2218
.editbuttons .cancel, .editbuttons .save {
2219
    background-repeat: no-repeat;
2220
    color: transparent;
2221
    height: 16px;
2222
    width: 16px;
2223
    float: left;
2224
}
2225

    
2226
.editbuttons .cancel {
2227
    background-image: url("./cancel.png");
2228
    margin-left: 3px;
2229
}
2230

    
2231
.editbuttons .save {
2232
    background-image: url("./save.png");
2233
    margin-left: 1px;
2234
}
2235

    
2236
.editbuttons img {
2237
    float:none !important;
2238
    margin: 0px !important;
2239
}
2240

    
2241
.namecontainer {
2242
    height: 18px;
2243
    margin-top: 9px;
2244
}
2245

    
2246
.nametextbox {
2247
    font-size: 95%;
2248
}
2249

    
2250
.large-spinner {
2251
    background: url("./icons/indicators/large/progress.gif");
2252
    margin-left: 298px;
2253
    margin-top: 0px;
2254
    height: 31px;
2255
    width: 31px;
2256
    position: absolute;
2257
}
2258

    
2259
.list .large-spinner {
2260
    margin-top:-30px;
2261
}
2262

    
2263
.single .large-spinner {
2264
    margin-top: 50px;
2265
}
2266

    
2267
div#networks-container .large-spinner {
2268
    margin-top: 50px;
2269
}
2270

    
2271
/* tables in list view */
2272
div.list div.dataTables_filter {
2273
    font-size: 75%;
2274
    display: none;
2275
    margin-bottom: 12px;
2276
}
2277

    
2278
div.list div.dataTables_filter input{
2279
    font-size: 100%;
2280
}
2281

    
2282
.dataTables_wrapper {
2283
    width: 515px;
2284
    padding-bottom: 40px;
2285
}
2286

    
2287
div.list table thead .sorting, div.list table thead .sorting_desc, div.list table thead .sorting_asc {
2288
    padding-right: 15px !important;
2289
}
2290

    
2291
div.list table {
2292
    width: 515px;
2293
    font-size: 75%;
2294
}
2295

    
2296
div.list table tbody td {
2297
    color: #3D3D3D;
2298
    padding:6px;
2299
    vertical-align: middle;
2300
}
2301

    
2302
div.list table thead tr th {
2303
    background-color: #CDE2EC;
2304
    background-image: url(bg.gif);
2305
    background-repeat: no-repeat;
2306
    background-position: right 11px;
2307
    font-weight: normal;
2308
    border: 1px solid transparent;
2309
    border-bottom: none;
2310
    padding: 4px;
2311
    text-align: left;
2312
    vertical-align: middle;
2313
    cursor: pointer;
2314
}
2315

    
2316
div.list table thead .sorting_asc, div.list table thead .sorting_desc {
2317
    background-color: #5CA1C0;
2318
}
2319

    
2320
div.list table thead .sorting_asc {
2321
    background-image: url(asc.gif);
2322
}
2323

    
2324
div.list table thead .sorting_desc {
2325
    background-image: url(desc.gif);
2326
}
2327

    
2328
div.list table .selection div.expand-icon {
2329
    background-image: url(asc.gif);
2330
    background-repeat: no-repeat;
2331
    position: relative;
2332
    cursor: pointer;
2333
    width: 15px;
2334
    height: 4px;
2335
    left: 19px;
2336
    top: -11px;
2337
}
2338

    
2339
ul.dropdown-selector {
2340
    background-color: #E6EEEE;
2341
    position: absolute;
2342
    margin-left: 1px;
2343
    display: block;
2344
    top: 255px;
2345
    font-size:75%;
2346
    width:40px;
2347
}
2348

    
2349
ul.dropdown-selector li {
2350
    padding: 4px;
2351
}
2352

    
2353
ul.dropdown-selector li:hover {
2354
    background-color: #5CA1C0;
2355
}
2356

    
2357
ul.dropdown-selector li a{
2358
    color: black;
2359
    text-decoration: none;
2360
}
2361

    
2362
div.list table span.imagetag {
2363
    display: none;
2364
}
2365

    
2366
div.list table thead .vmos {
2367
    width: 20px !important;
2368
    vertical-align:middle;
2369
}
2370

    
2371
div.list table .selection {
2372
    width: 20px !important;
2373
    text-align: left;
2374
    background-image: none;
2375
    padding-left: 6px;
2376
}
2377

    
2378
div.list table thead .vmflavor {
2379
    width: 100px !important;
2380
}
2381

    
2382
div.list table thead .vmgroup {
2383
    width: 40px !important;
2384
}
2385

    
2386
div.list table thead .vmstatus {
2387
    width: 50px !important;
2388
}
2389

    
2390
div.list table thead .vmname {
2391
    width: 70px !important;
2392
}
2393

    
2394
.spinner, .action-indicator {
2395
    clear: right;
2396
    float:right !important;
2397
    margin: 10px 6px 0 15px !important;
2398
}
2399
.action-indicator {
2400
    margin-right: 18px !important;
2401
}
2402

    
2403
.wave {
2404
    clear: right;
2405
    float:right !important;
2406
    margin: 10px 15px 0 15px !important;
2407
}
2408

    
2409
#networks-pane .spinner {
2410
    margin-top: 18px !important;
2411
}
2412

    
2413
.hidden {
2414
    display:none;
2415
}
2416

    
2417
div.actions a.selected, div.actions a.selected:hover, div.machine-actions a.selected, div.machine-actions a.selected:hover {
2418
    display:block !important;
2419
}
2420

    
2421
.action_error .message, .action_error .code {
2422
    display: none;
2423
}
2424

    
2425
.fixed {
2426
    bottom: 0;
2427
    position: fixed !important;
2428
}
2429

    
2430
/* Networks */
2431
#networks-pane {
2432
    background-color: transparent;
2433
    color: black;
2434
    margin-left: 1px;
2435
    margin-right: 0;
2436
}
2437

    
2438
#networkscreate {
2439
    color: black;
2440
    background-color: #FF7F2A;
2441
    cursor: pointer;
2442
    padding: 7px 24px;
2443
    text-decoration: none;
2444
}
2445

    
2446
#networkscreate:hover {
2447
    background-color: #FF9955;
2448
}
2449

    
2450
#networks-pane #beforecreate {
2451
    margin-left: -13px;
2452
    margin-top: -6px;
2453
}
2454

    
2455
#networks-container {
2456
    margin-top: 10px;
2457
    min-height: 270px;
2458
}
2459

    
2460
#networks-createcontainer {
2461
    position: absolute;
2462
    top: 155px;
2463
}
2464

    
2465
#networks-pane .public-networks {
2466
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
2467
    margin: 0 0 18px;
2468
    padding: 70px 0 15px 35px;
2469
}
2470

    
2471
#networks-pane .private-networks {
2472
    background: url("./running-bg.png") repeat scroll 0 0 transparent;
2473
    padding: 15px 20px 20px 35px;
2474
}
2475

    
2476
#public-template, #private-template, #public-machine-template, #private-machine-template {
2477
    display:none;
2478
}
2479

    
2480
div.network a.action-network-add {
2481
    display: none;
2482
}
2483

    
2484
div.network a.action-network-destroy {
2485
    margin-top: 32px !important;
2486
    width: 50px;
2487
    display: none;
2488
}
2489

    
2490
div.network {
2491
    clear: both;
2492
    min-height: 65px;
2493
    margin: 5px 0 0 -35px;
2494
    padding: 3px 20px 0;
2495
    width: 480px;
2496
    position: relative;
2497
}
2498

    
2499
#private-template {
2500
    margin: 2px 0 0 -30px;
2501
}
2502

    
2503
div.network-placeholder {
2504
    margin-left: 33px;
2505
}
2506

    
2507
div.private-networks div.network-placeholder {
2508
    border-left: 3px solid #FF7F2A;
2509
}
2510

    
2511
div.network-cable {
2512
    border-left: 3px solid #FF7F2A;
2513
    float: left;
2514
    margin-left: -40px;
2515
    margin-top: -45px;
2516
    height: 185px;
2517
    overflow: hidden;
2518
}
2519

    
2520
.first div.network-cable {
2521
    height:143px;
2522
    margin-top:-6px;
2523
}
2524

    
2525
div.network-contents div.machines-list div.first {
2526
    margin-top:0;
2527
}
2528

    
2529
.last div.network-cable {
2530
    height:85px;
2531
}
2532

    
2533
div.firewall-cable {
2534
    border-left: 3px solid #FF7F2A;
2535
    float: left;
2536
    margin-left: -100px;
2537
    margin-top: -20px;
2538
    height: 110px;
2539
}
2540

    
2541
.last div.firewall-cable {
2542
    display:none;
2543
}
2544

    
2545
div.network a:hover {
2546
    text-decoration: underline;
2547
    cursor: pointer;
2548
}
2549

    
2550
#networks-container .name {
2551
    font-size: 75%;
2552
}
2553

    
2554
div.network-machines, div.firewall {
2555
    font-size: 75%;
2556
    margin-left: 70px;
2557
}
2558

    
2559
div.firewall {
2560
    margin-left: 60px;
2561
    margin-bottom: 3px;
2562
}
2563

    
2564
div.machines-header, div.firewall-header {
2565
    background-color: #A1C8DB;
2566
    color: white;
2567
    cursor: pointer;
2568
    height: 17px;
2569
    width: 100px;
2570
}
2571

    
2572
 div.private-networks div.machines-header {
2573
    margin-top: -5px;
2574
}
2575

    
2576
div.network:hover div.machines-header, div.network:hover div.firewall-header {
2577
    background-color: #84b7d0;
2578
}
2579

    
2580
div.network-machine:hover div.firewall-header {
2581
    background-color: #5CA1C0;
2582
}
2583

    
2584
div.machines-label, div.firewall-label {
2585
    width: 83px;
2586
    padding-bottom:1px;
2587
    padding-left: 3px;
2588
}
2589

    
2590
div.firewall-label.darker {
2591
    background-color: #4085a5;
2592
}
2593

    
2594
.state {
2595
    float: right;
2596
    position: absolute;
2597
    right: 10px;
2598
    top: 40px;
2599
    font-size: 75%;
2600
}
2601

    
2602
div.network div.actions {
2603
    float: right;
2604
    font-size: 75%;
2605
    font-weight: normal;
2606
    height: 70px;
2607
    width: 100px;
2608
    position: absolute;
2609
    right: -100px;
2610
    top: 0;
2611
}
2612

    
2613
div.network div.machine-actions {
2614
    text-decoration: none;
2615
    float: right;
2616
    width: 100px;
2617
    margin: -7px -100px 0 0;
2618
    font-weight: normal;
2619
    font-size: 75%;
2620
}
2621

    
2622
div.network div.actions a, div.network div.machine-actions a {
2623
    text-decoration: none;
2624
    height: 15px;
2625
    color: black;
2626
    visibility: hidden;
2627
    display: block;
2628
}
2629

    
2630
div.network div.actions a {
2631
    margin: 4px 0 0 8px;
2632
}
2633

    
2634
div.network div.machine-actions a {
2635
    margin: 8px 0 0 8px;
2636
}
2637

    
2638
div.network div.actions a:hover, div.network div.machine-actions a:hover {
2639
    display: block;
2640
    background-color:#A1C8DB;
2641
    width: 200px;
2642
    opacity: 0.8;
2643
    filter: alpha(opacity = 80);
2644
}
2645

    
2646
div.network:hover div.actions a, div.network-machine:hover div.machine-actions a {
2647
    visibility: visible;
2648
}
2649

    
2650
div.network div.actions a.selected, div.network div.machine-actions a.selected {
2651
    color: #FF7F2A !important;
2652
    width: 50px !important;
2653
}
2654

    
2655
div.network div.actions a.selected:hover, div.network div.machine-actions a.selected:hover {
2656
    background-color: transparent;
2657
}
2658

    
2659
div.network div.display a {
2660
    color: black;
2661
    display: block;
2662
}
2663

    
2664
div.network-machine div.machine-actions a.action-details {
2665
    margin-top: 7px;
2666
}
2667

    
2668
div.network:hover {
2669
    background-color: #A1C8DB !important;
2670
}
2671

    
2672
.network-logos {
2673
    float:left;
2674
    padding-right: 10px;
2675
}
2676

    
2677
.network-logos:hover {
2678
    cursor: pointer;
2679
}
2680

    
2681
.state div {
2682
    text-align: right;
2683
    margin: 4px 1px -4px;
2684
}
2685

    
2686
.public-networks .state div {
2687
    margin-top: 4px;
2688
}
2689

    
2690
.private-networks .state div {
2691
    margin-top: 9px;
2692
    margin-bottom: -12px;
2693
}
2694

    
2695
.public-networks .name-div {
2696
    margin-top:-7px;
2697
    margin-bottom: 23px;
2698
}
2699

    
2700
div.indicator {
2701
    clear: none;
2702
    float: right;
2703
    height: 11px;
2704
    margin: 3px -1px;
2705
    width: 10px;
2706
}
2707

    
2708
#private-networks {
2709
    margin-top: 20px;
2710
}
2711

    
2712
.private-networks .editbuttons {
2713
    margin-right: 22%;
2714
}
2715

    
2716
.private-networks div.confirm_single {
2717
    margin: 45px -219px 0 0;
2718
    font-size: 80%;
2719
}
2720

    
2721
.private-networks .network-machine div.confirm_single {
2722
    margin: 0 -199px 0 0;
2723
}
2724

    
2725
.private-networks .state {
2726
    top: 35px;
2727
}
2728

    
2729
span.rename-network, span.configure {
2730
    background-repeat: no-repeat;
2731
    color: transparent;
2732
    font-size: 75%;
2733
    font-weight: normal;
2734
    margin-left: 10px;
2735
    padding-left: 10px;
2736
    text-align: left;
2737
}
2738

    
2739
span.rename-network {
2740
    cursor: pointer;
2741
}
2742

    
2743
div.name-div:hover span.rename-network {
2744
    color: #3D3D3D;
2745
    margin-top: 0.4em;
2746
    background-image: url(./pencil.png);
2747
    background-position: 0 3px;
2748
}
2749

    
2750
div.network:hover a.rename {
2751
    color: #3d3d3d;
2752
}
2753

    
2754
.network-separator {
2755
    background-color: #5CA1C0;
2756
    height: 1px;
2757
    margin: 2px 0 0 -5px;
2758
    width: 480px;
2759
    font-size: 1%;
2760
    line-height: 1px;
2761
}
2762

    
2763
.network-contents {
2764
    margin-left: -4px;
2765
    width: 504px;
2766
    clear: both;
2767
    padding-bottom: 7px;
2768
}
2769

    
2770
.network-machine .state div {
2771
    text-align: left;
2772
}
2773

    
2774
.network-machine {
2775
    margin-left: 35px;
2776
    padding-bottom: 5px;
2777
    padding-left: 5px;
2778
    padding-top: 5px;
2779
    margin-top: 5px;
2780
}
2781

    
2782
.network-machine .logo {
2783
    float:left;
2784
    padding-right: 10px;
2785
    position:relative;
2786
}
2787

    
2788
#networks-container .machine-name {
2789
    text-decoration: none !important;
2790
    margin-bottom: 10px;
2791
    color: #000000;
2792
    margin-top: -4px;
2793
}
2794

    
2795
.private-networks .separator {
2796
    background-color: #5CA1C0;
2797
    height: 1px;
2798
    margin: 3px 0 -2px -10px;
2799
    width: 485px;
2800
}
2801

    
2802
.network-machine .state {
2803
    margin-right: 18px;
2804
}
2805

    
2806
.network-machine .state .status {
2807
    margin-bottom: 4px;
2808
}
2809

    
2810
.machine-name .name {
2811
    margin-top: -10px !important;
2812
}
2813

    
2814
.machine-name .namecontainer {
2815
    line-height: 18px;
2816
    margin-bottom: 20px;
2817
}
2818

    
2819
div.network-machine:hover {
2820
    background-color: #84B7D0;
2821
}
2822

    
2823
.machines {
2824
    width: 416px;
2825
    margin-bottom: -8px;
2826
    margin-top: 10px;
2827
}
2828

    
2829
div.empty-network-slot {
2830
    height: 60px;
2831
}
2832

    
2833
div.network-remove-machine, div.network-add-machine {
2834
    background-color: #FB822F;
2835
    color: #bc4b00;
2836
    width:90px;
2837
    height:18px;
2838
    float:left;
2839
    margin:40px 0 0 -100px;
2840
}
2841

    
2842
span.remove-icon {
2843
    font-size: 80%;
2844
    margin-left: 15px;
2845
}
2846

    
2847
div.add-icon {
2848
    margin-left: 15px;
2849
    margin-top: -3px;
2850
    cursor: pointer;
2851
}
2852

    
2853
span.remove-icon:hover, span.add-icon:hover {
2854
    cursor:pointer;
2855
    color: #fff;
2856
}
2857

    
2858
div.network-add-machine {
2859
    margin:43px 0 0 -3px;
2860
}
2861

    
2862
.firewall-on {
2863
    color: #42E342;
2864
}
2865

    
2866
.firewall-off {
2867
    color: #F82E2E;
2868
}
2869

    
2870
.firewall-content {
2871
    color: black;
2872
    font-size: 60%;
2873
    margin-left: 60px;
2874
    height: 55px;
2875
    margin-bottom: 17px;
2876
}
2877

    
2878
.firewall-content .checkbox-legends {
2879
    vertical-align: text-top;
2880
}
2881

    
2882
.checkbox-legends a {
2883
    color: black;
2884
    text-decoration: underline;
2885
    font-size: 100%;
2886
}
2887

    
2888
h5.machine-connect {
2889
    font-size: 75%;
2890
    margin-bottom: 3px;
2891
}
2892

    
2893
.machine-connect span {
2894
    text-decoration: underline;
2895
}
2896

    
2897
h5.machine-connect span:hover {
2898
    cursor: pointer;
2899
}
2900

    
2901
.firewall-apply {
2902
    background-color: #4085a5;
2903
    border: medium none;
2904
    float: right;
2905
    font-size: 105%;
2906
    height: 18px;
2907
    margin-right: 5px;
2908
    margin-top: 3px;
2909
    width: 75px;
2910
}
2911

    
2912
.firewall-apply:hover {
2913
    background-color:#5CA1C0;
2914
}
2915

    
2916
.name-div {
2917
    margin: -10px 0 30px 70px;
2918
}
2919

    
2920
.machine-name-div {
2921
    margin-bottom: 20px;
2922
    margin-left: 60px;
2923
}
2924

    
2925
div.reboot-dialog {
2926
    display: none;
2927
    color: black;
2928
    background-color: #4085A5;
2929
    font-size: 75%;
2930
    margin-top: 15px;
2931
    width: 698px;
2932
    z-index: 1;
2933
}
2934

    
2935
div#reboot-machine-template, div.reboot-machine-entry {
2936
    display: none;
2937
    padding: 0 0 10px 35px;
2938
    width: 300px;
2939
}
2940

    
2941
div.reboot-dialog p {
2942
    color: #FF7F2A;
2943
    padding: 10px 0 10px 10px;
2944
}
2945

    
2946
div.reboot-dialog button {
2947
    float:right;
2948
    border: 1px solid #FF7F2A;
2949
    background-color: transparent;
2950
    font-size:100%;
2951
}
2952

    
2953
div.reboot-dialog button:hover {
2954
    background-color: #FF7F2A;
2955
}
2956

    
2957
div.reboot-dialog button.reboot-all {
2958
    margin: -30px 35px 0 0;
2959
}
2960

    
2961
div.reboot-dialog button.reboot-single {
2962
    color: black;
2963
    margin-top: -20px;
2964
}
2965

    
2966
div.reboot-dialog div.code, div.reboot-dialog div.action, div.reboot-dialog div.message, div.reboot-dialog button.details {
2967
    display:none;
2968
}
2969

    
2970
div.reboot-dialog button.details {
2971
    border-color: #800000;
2972
    margin-top: -20px;
2973
}
2974

    
2975
div.reboot-dialog button.details:hover {
2976
    background-color: #800000;
2977
}
2978

    
2979
/* Metadata */
2980
.info-content {
2981
    clear: both;
2982
    height: 95px;
2983
    width: 512px;
2984
}
2985

    
2986
.metadata-container {
2987
    line-height: 12px;
2988
    height: 85px;
2989
    background-color: #84b7d0;
2990
}
2991

    
2992
.metadata-column {
2993
    border-right: 1px solid #5CA1C0;
2994
    color: black;
2995
    float: left;
2996
    font-size: 60%;
2997
    margin-top: 3px;
2998
    height: 70px;
2999
    padding-bottom: 5px;
3000
}
3001

    
3002
.vm-stats {
3003
    padding-left: 10px;
3004
    padding-right: 5px;
3005
    width: 119px;
3006
}
3007

    
3008
.vm-details {
3009
    width: 169px;
3010
    margin-left:17px;
3011
}
3012

    
3013
.vm-metadata {
3014
    padding-left: 10px;
3015
    width: 129px;
3016
    border: none;
3017
}
3018

    
3019
.metadata-left {
3020
    float:left;
3021
    width: 50px;
3022
    height: 60px;
3023
}
3024

    
3025
.metadata-right {
3026
    width: 73px;
3027
    float:left;
3028
    height: 35px;
3029
    padding-left: 5px;
3030
    position:relative;
3031
    overflow:hidden;
3032
}
3033

    
3034
.metadata-right .items {
3035
    position:absolute;
3036
    height:20000em;
3037
}
3038

    
3039
.metadata-keys-container {
3040
    height: 60px;
3041
    float: left;
3042
}
3043

    
3044
.single .metadata-keys-container {
3045
    float: none;
3046
    height: 50px;
3047
}
3048

    
3049
.single a.manage-metadata {
3050
    font-size: 80%;
3051
    margin-left:4px;
3052
    color: #383838;
3053
}
3054

    
3055
a.manage-metadata {
3056
    font-size: 100%;
3057
    color: black;
3058
    margin-left:17px;
3059
    text-decoration: underline;
3060
}
3061

    
3062
div.machine a.manage-metadata:hover {
3063
    background-color: transparent;
3064
}
3065

    
3066
.metadata-actions, .scrollable {
3067
    padding-left: 5px;
3068
}
3069

    
3070
.singe .metadata-actions, .single .scrollable {
3071
    font-size: 80%;
3072
    line-height: 12px;
3073
    width: 300px;
3074
}
3075

    
3076
.metadata-actions .prev,  .metadata-actions .next{
3077
    float:left;
3078
    width:29px;
3079
    height:6px;
3080
    cursor: pointer;
3081
}
3082

    
3083
.metadata-actions .prev {
3084
    background: url("./roll-up.png") no-repeat scroll 0 0 transparent;
3085
}
3086

    
3087
.metadata-actions .next {
3088
    background: url("./roll-down.png") no-repeat scroll 0 0 transparent;
3089
}
3090

    
3091
.scrollable {
3092
    position:relative;
3093
    overflow:hidden;
3094
    height: 35px;
3095
    width: 60px;
3096
    margin-bottom:2px;
3097
}
3098

    
3099
.scrollable .items {
3100
    position:absolute;
3101
    height:20000em;
3102
}
3103

    
3104
.metadata-bar {
3105
    float: right !important;
3106
    margin: 1px 7px 0 !important;
3107
}
3108

    
3109
/* single view */
3110
.single {
3111
    color: #383838;
3112
    margin-top: -76px;
3113
    padding-bottom: 10px;
3114
    width: 679px;
3115
}
3116

    
3117
.single .column1 {
3118
    float: left;
3119
    margin: 1px 0 25px 17px;
3120
    width: 140px;
3121
}
3122

    
3123
.single .column1 .state {
3124
    float: left;
3125
    margin-left: 4px;
3126
    padding-bottom: 6px;
3127
    padding-top: 3px;
3128
    position: relative;
3129
    right: 0;
3130
    text-align: center;
3131
    width: 126px;
3132
}
3133

    
3134
.single .column1 .state-label {
3135
    padding-top: 5px;
3136
}
3137

    
3138
.single .column1 .indicators {
3139
    margin-right: 38px !important;
3140
}
3141

    
3142
.single div.connect-arrow {
3143
    margin-left: -17px;
3144
}
3145

    
3146
.single div.connect-border {
3147
    margin-left: -29px;
3148
}
3149

    
3150
.single .single-actions {
3151
    padding-bottom: 4px;
3152
    padding-left: 15px;
3153
    width: 69px;
3154
    float: left;
3155
}
3156

    
3157
.single div.single-action {
3158
    font-size: 80%;
3159
    line-height: 18px;
3160
    text-decoration: none;
3161
    cursor: pointer;
3162
}
3163

    
3164
.single div.single-action:hover {
3165
    background-color:#A1C8DB;
3166
    width: 180px;
3167
    opacity: 0.8;
3168
    filter: alpha(opacity = 80);
3169
}
3170

    
3171
.single div.single-action.selected {
3172
    color: #FF7F2A !important;
3173
    width: 50px !important;
3174
}
3175

    
3176
.single div.single-action.selected:hover {
3177
    background-color:transparent;
3178
}
3179

    
3180
.single div.confirm_single {
3181
    font-size: 80%;
3182
    margin: -19px -115px 0 0;
3183
}
3184

    
3185
.single div.action-container.destroy div.confirm_single {
3186
    margin: -18px -116px 0 0;
3187
    position: relative;
3188
    left: 0px;
3189
}
3190

    
3191
.single div.confirm_single button.no {
3192
    margin-left: -5px;
3193
}
3194

    
3195
.single .spinner, .single .action-indicator {
3196
    margin: 15px 45px 0 0px !important
3197
}
3198

    
3199
.single .action-indicator {
3200
    margin-right: 55px !important;
3201
}
3202

    
3203
.single .wave {
3204
    margin: 15px 53px 0 0px !important
3205
}
3206

    
3207
.single div.action_error {
3208
    margin: 2px 0px 0 605px !important;
3209
    position: relative;
3210
}
3211

    
3212
.single .column2 {
3213
    background-color: #A1C8DB;
3214
    float: left;
3215
    font-size: 78%;
3216
    line-height: 17px;
3217
    margin: 0 0 10px 5px;
3218
    width: 358px;
3219
}
3220

    
3221
.single .column2 .machine-labels {
3222
    float: left;
3223
    font-size: 90%;
3224
    margin-left: 10px;
3225
    margin-top: 10px;
3226
    width: 125px;
3227
}
3228

    
3229
.single .column2 .machine-details {
3230
    float: right;
3231
    text-align: right;
3232
    font-size: 90%;
3233
    width: 210px;
3234
    margin-right: 10px;
3235
    margin-top: 10px;
3236
}
3237

    
3238
.single .column2 .name, .single .column2 .disk, .single .column2 .image-size, .single .column2 .ipv6 {
3239
    margin-bottom: 13px;
3240
}
3241

    
3242
.single .tags {
3243
    clear: both;
3244
    margin-bottom: 10px;
3245
    margin-left: 10px;
3246
}
3247

    
3248
.single .tags-label {
3249
    float: left;
3250
    padding: 0 5px;
3251
    width: 30px;
3252
}
3253

    
3254
.single .tags-down-arrow {
3255
    background: url("/static/tags-down-arrow.png") no-repeat scroll 1px 7px transparent;
3256
    float: left;
3257
    height: 16px;
3258
    width: 9px;
3259
}
3260

    
3261
.single .tags-header {
3262
    background-color: #84B7D0;
3263
    cursor: pointer;
3264
    height: 16px;
3265
    width: 55px;
3266
}
3267

    
3268
.single .tags-content {
3269
    background-color: #84B7D0;
3270
    clear: both;
3271
    height: 65px;
3272
    padding-bottom: 5px;
3273
    padding-top: 5px;
3274
    width: 300px;
3275
}
3276

    
3277
.single .column3 {
3278
    background-color: #A1C8DB;
3279
    margin-left: 535px;
3280
    position: absolute;
3281
    top: 280px;
3282
    width: 150px;
3283
    overflow: visible;
3284
    padding-bottom: 10px;
3285
}
3286

    
3287
.single .column3 .controls {
3288
    font-size: 80%;
3289
    height: 20px;
3290
    padding-left: 7px;
3291
    padding-right: 7px;
3292
    padding-top: 8px;
3293
}
3294

    
3295
.single .column3 .previous {
3296
    float:left;
3297
    width: 72px;
3298
}
3299

    
3300
.single .column3 .next {
3301
    float: right;
3302
    text-align: center;
3303
    width: 60px;
3304
}
3305

    
3306
.single .column3 .next-label {
3307
    float: right;
3308
    margin-right: 3px;
3309
    margin-top: -2px;
3310
}
3311

    
3312
.single .column3 .next-arrow {
3313
    float: right;
3314
    height: 18px;
3315
    width: 10px;
3316
    background: url("./right-arrow.png") no-repeat scroll 3px 2px transparent;
3317
}
3318

    
3319
.single .column3 .prev-label {
3320
    float: left;
3321
    margin-left: 3px;
3322
    margin-top: -2px;
3323
}
3324

    
3325
.single .column3 .prev-arrow {
3326
    background: url("./left-arrow.png") no-repeat scroll 3px 2px transparent;
3327
    float: left;
3328
    height: 18px;
3329
    width: 10px;
3330
}
3331

    
3332
.single .column3 .separator {
3333
    width: 135px;
3334
    height: 1px;
3335
    background-color: #84B7D0;
3336
    margin: 0 0 0 7px;
3337
    clear: both;
3338
}
3339

    
3340
.single .column3 .servers {
3341
    font-size: 80%;
3342
    line-height: 15px;
3343
    padding-top: 10px;
3344
    text-align: right;
3345
    overflow: visible;
3346
    position: relative;
3347
}
3348

    
3349
.single .column3 .server-name {
3350
    margin-left: 10px;
3351
    padding-right: 5px;
3352
    cursor: pointer;
3353
    padding-bottom: 2px;
3354
}
3355

    
3356
div.single div.column3 div.server-name:hover, .single .column3 .column3-selected {
3357
    background-color: #84B7D0;
3358
    color: white;
3359
    opacity: 0.8;
3360
    padding-left: 9px;
3361
    text-align: left;
3362
    width: 160px;
3363
    filter: alpha(opacity = 80);
3364
    position: relative;
3365
}
3366

    
3367
.single .toggler {
3368
    color: #FFFFFF;
3369
    float: right;
3370
    font-size: 140%;
3371
}
3372

    
3373
.single .single-cpu, .single .single-network {
3374
    float: left;
3375
    height: 100px;
3376
    width: 48%;
3377
}
3378

    
3379
.single .cpu-usage, .single .network-usage {
3380
    padding-bottom: 15px;
3381
    padding-left: 20px;
3382
    padding-top: 15px;
3383
    font-size: 90%;
3384
}
3385

    
3386
.single .cpu-graph, .single .network-graph {
3387
    background-color: #A1C8DB;
3388
    height: 210px;
3389
    margin-left: 20px;
3390
    width: 300px;
3391
}
3392

    
3393
.single .single-image {
3394
    width: 126px;
3395
    margin-bottom: 10px;
3396
    margin-left: 4px;
3397
}
3398

    
3399
.single .column3 .previous, .single .column3 .next {
3400
    cursor: pointer;
3401
    background-color: #84B7D0;
3402
    color: white;
3403
    font-size: 100%;
3404
    height: 15px;
3405
    padding-top: 2px;
3406
}
3407

    
3408
.single .column3 .disabled {
3409
    opacity: 0.5;
3410
    filter: alpha(opacity = 50);
3411
}
3412

    
3413
.single div.lower {
3414
    clear:both;
3415
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
3416
    width: 700px;
3417
    height: 270px;
3418
}
3419

    
3420
.single div.upper {
3421
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
3422
    margin-bottom: 10px;
3423
    min-height: 310px;
3424
    overflow: visible;
3425
    padding-top: 60px;
3426
    width: 700px;
3427
}
3428

    
3429
/* console css */
3430
.console-header-logo {
3431
    padding-top: 17px;
3432
    margin-left: 30px;
3433
    position: fixed;
3434
}
3435

    
3436
#console-header div.help-text {
3437
    font-size: 75%;
3438
    font-weight:bold;
3439
    color:#FF7F2A;
3440
    float:left;
3441
    position: absolute;
3442
    margin: 45px 0 0 2px;
3443
}
3444

    
3445
div.console-container {
3446
    margin: 0 0em;
3447
    height: auto;
3448
}
3449

    
3450
#wrapper.console {
3451
    width: auto;
3452
}
3453

    
3454
.console-info {
3455
    font-size:80%;
3456
    color: white;
3457
    float:left;
3458
    position:relative;
3459
    margin: 25px 0 0 480px;
3460
}
3461

    
3462
applet {
3463
    width:100%;
3464
    height:100%;
3465
}
3466

    
3467
div.console-footer {
3468
    /* this is for version 0.5*/
3469
    display: none;
3470
}
3471

    
3472
.console-footer #footer-text{
3473
    float:left;
3474
    left: auto;
3475
    margin-left:30px;
3476
}
3477

    
3478
/* add network wizard (see also #wizard for shared classes) */
3479
#networks-wizard .header {
3480
    background-color: #4085A5;
3481
    height: 56px;
3482
}
3483

    
3484
#networks-wizard div.name-input {
3485
    margin: 75px 0 0 55px;
3486
}
3487

    
3488
#networks-wizard input {
3489
    border: 1px solid #CCCCCC;
3490
    color: #445566;
3491
    letter-spacing: 1px;
3492
    width: 170px;
3493
}
3494

    
3495
#networks-wizard span.help {
3496
    font-style: italic;
3497
    font-size: 80%;
3498
    margin-left: 10px;
3499
}
3500

    
3501
#networks-wizard .separator-end {
3502
    background-color: #387693;
3503
    height: 6px;
3504
    width: 479px;
3505
    margin-left: -13px;
3506
    margin-top: 22px;
3507
}
3508

    
3509
.red {
3510
    color: red;
3511
}
3512

    
3513
/* add server to network wizard (see also #metadata-wizard for shared classes) */
3514
#add-machines-wizard span.machine-name {
3515
    margin-left: 4px;
3516
    vertical-align: text-top;
3517
}
3518

    
3519
#add-machines-wizard img.list-logo {
3520
    margin: 2px 1px 1px;
3521
}
3522

    
3523
.css-panes {
3524
    clear: both;
3525
}
3526

    
3527
.last .firewall-content {
3528
    margin-bottom:13px;
3529
}
3530

    
3531
#pub .last .network-separator {
3532
    display:none;
3533
}
3534

    
3535
.public-networks .empty-network-slot {
3536
    display: none;
3537
}
3538

    
3539
/* float clearing for all browsers except the devil one */
3540
.clearfix:after{
3541
  clear: both;
3542
  content: ".";
3543
  display: block;
3544
  height: 0;
3545
  visibility: hidden;
3546
  font-size: 0;
3547
}
3548

    
3549
#machinesview-list div.action-indicator {
3550
    margin:0 !important;
3551
    float: none !important;
3552
}
3553

    
3554
div.action-indicator {
3555
    width: 15px;
3556
    height: 20px;
3557
    background-repeat: no-repeat;
3558
    background-position: 0 0;
3559
}
3560
div.action-indicator.destroy {
3561
    background-image: url("./icons/actions/medium/destroy.png");
3562
}
3563
div.action-indicator.start {
3564
    background-image: url("./icons/actions/medium/start.png");
3565
}
3566
div.action-indicator.reboot {
3567
    background-image: url("./icons/actions/medium/reboot.png");
3568
}
3569
div.action-indicator.shutdown {
3570
    background-image: url("./icons/actions/medium/shutdown.png");
3571
}