Statistics
| Branch: | Tag: | Revision:

root / ui / static / main.css @ 95772145

History | View | Annotate | Download (63.1 kB)

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

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

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

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

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

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

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

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

    
68
#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
    visibility: visible;
817
}
818

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
1021
div.network div.toggler {
1022
    margin-left: 90px;
1023
}
1024

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
1899

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
2381
/* group column commented out for v0.5
2382
div.list table thead .vmgroup {
2383
    width: 40px !important;
2384
}
2385
*/
2386

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
2531
.last div.network-cable {
2532
    height:85px;
2533
}
2534

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

    
2543
.last div.firewall-cable {
2544
    display:none;
2545
}
2546

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

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

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

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

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

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

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

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

    
2586
div.machines-label, div.firewall-label {
2587
    width: 100%;
2588
    padding-bottom:1px;
2589
    padding-left: 3px;
2590
}
2591

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

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

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

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

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

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

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

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

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

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

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

    
2661
div.network div.display a {
2662
    visibility: visible;
2663
}
2664

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
2730
.private-networks div.machines-list {
2731
    padding-top: 3px;
2732
}
2733

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

    
2744
span.rename-network {
2745
    cursor: pointer;
2746
}
2747

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

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

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

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

    
2775
.network-machine .state div {
2776
    text-align: left;
2777
}
2778

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

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

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

    
2800
.private-networks .separator {
2801
    background-color: #5CA1C0;
2802
    height: 1px;
2803
    margin: 3px 0 -2px -10px;
2804
    width: 485px;
2805
}
2806

    
2807
.network-machine .state {
2808
    margin-right: 18px;
2809
}
2810

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

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

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

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

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

    
2834
div.empty-network-slot {
2835
    height: 60px;
2836
}
2837

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

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

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

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

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

    
2867
.firewall-on {
2868
    color: #42E342;
2869
}
2870

    
2871
.firewall-off {
2872
    color: #F82E2E;
2873
}
2874

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

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

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

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

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

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

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

    
2917
.firewall-apply:hover {
2918
    background-color:#5CA1C0;
2919
}
2920

    
2921
.name-div {
2922
    margin: -9px 0 30px 70px;
2923
}
2924

    
2925
.machine-name-div {
2926
    margin-bottom: 20px;
2927
    margin-left: 60px;
2928
}
2929

    
2930
div.reboot-dialog {
2931
    display: none;
2932
    color: black;
2933
    background-color: #4085A5;
2934
    font-size: 75%;
2935
    margin-top: 15px;
2936
    width: 698px;
2937
    z-index: 1;
2938
}
2939

    
2940
div#reboot-machine-template, div.reboot-machine-entry {
2941
    display: none;
2942
    padding: 0 0 10px 35px;
2943
    width: 300px;
2944
}
2945

    
2946
div.reboot-dialog p {
2947
    color: #FF7F2A;
2948
    padding: 10px 0 10px 10px;
2949
}
2950

    
2951
div.reboot-dialog button {
2952
    float:right;
2953
    border: 1px solid #FF7F2A;
2954
    background-color: transparent;
2955
    font-size:100%;
2956
}
2957

    
2958
div.reboot-dialog button:hover {
2959
    background-color: #FF7F2A;
2960
}
2961

    
2962
div.reboot-dialog button.reboot-all {
2963
    margin: -30px 35px 0 0;
2964
}
2965

    
2966
div.reboot-dialog button.reboot-single {
2967
    color: black;
2968
    margin-top: -20px;
2969
}
2970

    
2971
div.reboot-dialog div.code, div.reboot-dialog div.action, div.reboot-dialog div.message, div.reboot-dialog button.details {
2972
    display:none;
2973
}
2974

    
2975
div.reboot-dialog button.details {
2976
    border-color: #800000;
2977
    margin-top: -20px;
2978
}
2979

    
2980
div.reboot-dialog button.details:hover {
2981
    background-color: #800000;
2982
}
2983

    
2984
/* Metadata */
2985
.info-content {
2986
    clear: both;
2987
    height: 95px;
2988
    width: 512px;
2989
}
2990

    
2991
.metadata-container {
2992
    line-height: 12px;
2993
    height: 85px;
2994
    background-color: #84b7d0;
2995
}
2996

    
2997
.metadata-column {
2998
    border-right: 1px solid #5CA1C0;
2999
    color: black;
3000
    float: left;
3001
    font-size: 60%;
3002
    margin-top: 3px;
3003
    height: 70px;
3004
    padding-bottom: 5px;
3005
}
3006

    
3007
.vm-stats {
3008
    padding-left: 10px;
3009
    padding-right: 5px;
3010
    width: 119px;
3011
}
3012

    
3013
.vm-details {
3014
    width: 169px;
3015
    margin-left:17px;
3016
}
3017

    
3018
.vm-metadata {
3019
    padding-left: 10px;
3020
    width: 129px;
3021
    border: none;
3022
}
3023

    
3024
.metadata-left {
3025
    float:left;
3026
    width: 50px;
3027
    height: 60px;
3028
}
3029

    
3030
.metadata-right {
3031
    width: 73px;
3032
    float:left;
3033
    height: 35px;
3034
    padding-left: 5px;
3035
    position:relative;
3036
    overflow:hidden;
3037
}
3038

    
3039
.metadata-right .items {
3040
    position:absolute;
3041
    height:20000em;
3042
}
3043

    
3044
.metadata-keys-container {
3045
    height: 60px;
3046
    float: left;
3047
}
3048

    
3049
.single .metadata-keys-container {
3050
    float: none;
3051
    height: 50px;
3052
}
3053

    
3054
.single a.manage-metadata {
3055
    font-size: 80%;
3056
    margin-left:4px;
3057
    color: #383838;
3058
}
3059

    
3060
a.manage-metadata {
3061
    font-size: 100%;
3062
    color: black;
3063
    margin-left:17px;
3064
    text-decoration: underline;
3065
}
3066

    
3067
div.machine a.manage-metadata:hover {
3068
    background-color: transparent;
3069
}
3070

    
3071
.metadata-actions, .scrollable {
3072
    padding-left: 5px;
3073
}
3074

    
3075
.singe .metadata-actions, .single .scrollable {
3076
    font-size: 80%;
3077
    line-height: 12px;
3078
    width: 300px;
3079
}
3080

    
3081
.metadata-actions .prev,  .metadata-actions .next{
3082
    float:left;
3083
    width:29px;
3084
    height:6px;
3085
    cursor: pointer;
3086
}
3087

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

    
3092
.metadata-actions .next {
3093
    background: url("./roll-down.png") no-repeat scroll 0 0 transparent;
3094
}
3095

    
3096
.scrollable {
3097
    position:relative;
3098
    overflow:hidden;
3099
    height: 35px;
3100
    width: 60px;
3101
    margin-bottom:2px;
3102
}
3103

    
3104
.scrollable .items {
3105
    position:absolute;
3106
    height:20000em;
3107
}
3108

    
3109
.metadata-bar {
3110
    float: right !important;
3111
    margin: 1px 7px 0 !important;
3112
}
3113

    
3114
/* single view */
3115
.single {
3116
    color: #383838;
3117
    margin-top: -76px;
3118
    padding-bottom: 10px;
3119
    width: 679px;
3120
}
3121

    
3122
.single .column1 {
3123
    float: left;
3124
    margin: 1px 0 25px 17px;
3125
    width: 140px;
3126
}
3127

    
3128
.single .column1 .state {
3129
    float: left;
3130
    margin-left: 4px;
3131
    padding-bottom: 6px;
3132
    padding-top: 3px;
3133
    position: relative;
3134
    right: 0;
3135
    text-align: center;
3136
    width: 126px;
3137
}
3138

    
3139
.single .column1 .state-label {
3140
    padding-top: 5px;
3141
}
3142

    
3143
.single .column1 .indicators {
3144
    margin-right: 38px !important;
3145
}
3146

    
3147
.single div.connect-arrow {
3148
    margin-left: -17px;
3149
}
3150

    
3151
.single div.connect-border {
3152
    margin-left: -29px;
3153
}
3154

    
3155
.single .single-actions {
3156
    padding-bottom: 4px;
3157
    padding-left: 15px;
3158
    width: 69px;
3159
    float: left;
3160
}
3161

    
3162
.single div.single-action {
3163
    font-size: 80%;
3164
    line-height: 18px;
3165
    text-decoration: none;
3166
    cursor: pointer;
3167
}
3168

    
3169
.single div.single-action:hover {
3170
    background-color:#A1C8DB;
3171
    width: 180px;
3172
    opacity: 0.8;
3173
    filter: alpha(opacity = 80);
3174
}
3175

    
3176
.single div.single-action.selected {
3177
    color: #FF7F2A !important;
3178
    width: 50px !important;
3179
}
3180

    
3181
.single div.single-action.selected:hover {
3182
    background-color:transparent;
3183
}
3184

    
3185
.single div.confirm_single {
3186
    font-size: 80%;
3187
    margin: -19px -115px 0 0;
3188
}
3189

    
3190
.single div.action-container.destroy div.confirm_single {
3191
    margin: -18px -116px 0 0;
3192
    position: relative;
3193
    left: 0px;
3194
}
3195

    
3196
.single div.confirm_single button.no {
3197
    margin-left: -5px;
3198
}
3199

    
3200
.single .spinner, .single .action-indicator {
3201
    margin: 15px 45px 0 0px !important
3202
}
3203

    
3204
.single .action-indicator {
3205
    margin-right: 55px !important;
3206
}
3207

    
3208
.single .wave {
3209
    margin: 15px 53px 0 0px !important
3210
}
3211

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
3455
#wrapper.console {
3456
    width: auto;
3457
}
3458

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

    
3467
applet {
3468
    width:100%;
3469
    height:100%;
3470
}
3471

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

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

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

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

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

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

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

    
3514
.red {
3515
    color: red;
3516
}
3517

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

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

    
3528
.css-panes {
3529
    clear: both;
3530
}
3531

    
3532
.last .firewall-content {
3533
    margin-bottom:13px;
3534
}
3535

    
3536
#pub .last .network-separator {
3537
    display:none;
3538
}
3539

    
3540
.public-networks .empty-network-slot {
3541
    display: none;
3542
}
3543

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

    
3554
#machinesview-list div.action-indicator {
3555
    margin:0 !important;
3556
    float: none !important;
3557
}
3558

    
3559
div.action-indicator {
3560
    width: 15px;
3561
    height: 20px;
3562
    background-repeat: no-repeat;
3563
    background-position: 0 0;
3564
}
3565

    
3566
tbody.machines div.action-indicator {
3567
    position: relative;
3568
    top: -2px;
3569
}
3570
div.state .destroy, tbody.machines .destroy {
3571
    background-image: url("./icons/actions/medium/destroy.png");
3572
}
3573
div.state .start, tbody.machines .start {
3574
    background-image: url("./icons/actions/medium/start.png");
3575
}
3576
div.state .reboot, tbody.machines .reboot {
3577
    background-image: url("./icons/actions/medium/reboot.png");
3578
}
3579
div.state .shutdown, tbody.machines .shutdown {
3580
    background-image: url("./icons/actions/medium/shutdown.png");
3581
}