Statistics
| Branch: | Tag: | Revision:

root / ui / static / main.css @ e996a0af

History | View | Annotate | Download (61.3 kB)

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

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

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

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

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

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

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

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

    
68
ol, ul {
69
    list-style: none;
70
}
71

    
72
blockquote, q {
73
    quotes: none;
74
}
75

    
76
blockquote:before, blockquote:after,
77
q:before, q:after {
78
    content: '';
79
    content: none;
80
}
81

    
82
/* remember to define focus styles! */
83
:focus {
84
    outline: 1px dotted #87AADE;
85
}
86

    
87
/* remember to highlight inserts somehow! */
88
ins {
89
    text-decoration: none;
90
}
91

    
92
del {
93
    text-decoration: line-through;
94
}
95

    
96
/* tables still need 'cellspacing="0"' in the markup */
97
table {
98
    border-collapse: collapse;
99
    border-spacing: 0;
100
}
101

    
102
h5 {
103
    font-weight: normal;
104
    margin-bottom:3px;
105
}
106

    
107
/* root element for tabs  */
108
.tab-name {
109
    background-color: #5CA1C0;
110
    color: #FFFFFF;
111
    float: left;
112
    font-size: 150%;
113
    height: 28px;
114
    text-align: center;
115
    width: 170px;
116
}
117

    
118
.tab-separator {
119
    background-color: white;
120
    float: left;
121
    width: 2px;
122
    height: 23px;
123
    margin-top: 4px;
124
}
125

    
126
ul.css-tabs {
127
    padding: 0;
128
    height:31px;
129
    background-color: #5CA1C0;
130
}
131

    
132
ul.css-tabs .secondary {
133
    position:relative;
134
}
135

    
136
/* single tab */
137
ul.css-tabs li {
138
    float:left;
139
    padding:0;
140
    list-style-type:none;
141
}
142

    
143
ul.css-tabs .current {
144
    background: #4085A5;
145
}
146

    
147
/* link inside the tab. uses a background image */
148
ul.css-tabs a {
149
    float:left;
150
    display:block;
151
    text-decoration:none;
152
    color:#d2d2d2;
153
    position:relative;
154
    outline:0;
155
    padding: 4px 25px 0;
156
    height: 27px;
157
}
158

    
159
ul.css-tabs a:hover {
160
    background: #74AEC9;
161
}
162

    
163
/* selected tab */
164
ul.css-tabs a.current {
165
    cursor:default;
166
}
167

    
168
ul.css-tabs a.current:hover {
169
    background: #4085A5;
170
}
171
/* tab pane */
172
div.css-panes {
173
/*    border-top: 10px solid #87aade;
174
    border-bottom: 10px solid #87aade;  */
175
    background: transparent;
176
}
177

    
178
.css-panes > div.pane {
179
    display:none;
180
}
181

    
182
/* CSS3 border radius for various elements. yea - CSS isn't perfect */
183
.rounded, #sheet input, .error {
184
    border-radius: 5px;
185
    -webkit-border-radius: 5px;
186
    -moz-border-radius: 5px;
187
    -o-border-radius: 5px;
188
    -khtml-border-radius: 5px;
189
}
190

    
191
/* validation error message */
192
.error {
193
    background-color:#E8FF6D;
194
    padding:4px;
195
    -webkit-box-shadow: #000 0 0 9pt;
196
    -moz-box-shadow: #000 0 0 9pt;
197
}
198

    
199
/* nested arrow inside error message. It's 100% CSS. No images. */
200
.error em {
201
    border: 10px solid;
202
    border-color: #E8FF6D transparent transparent;
203
    bottom: -17px;
204
    display: block;
205
    height: 0;
206
    left: 10px;
207
    position: absolute;
208
    width: 0;
209
}
210

    
211
/* input field that caused validation error */
212
.invalid {
213
    background-color: rgba(221, 233, 255, 0.898) !important;
214
}
215

    
216
#beforecreate {
217
    position:relative;
218
    background-color: #FF9955;
219
    float: left;
220
    height: 31px;
221
    margin-left: -13px;
222
    margin-top: -6px;
223
    width: 13px;
224
}
225

    
226
#ie-fix {
227
    z-index: 1000;
228
    position: relative;
229
}
230
#createcontainer {
231
    margin-top: 20px;
232
    margin-bottom: 10px;
233
    z-index: 1000;
234
}
235

    
236
#create {
237
    background-color: #FF7F2A;
238
    color: #000;
239
    cursor: pointer;
240
    padding: 7px 24px;
241
    text-decoration: none;
242
    font-size:100%;
243
}
244

    
245
#create:hover {
246
    background-color: #FF9955;
247
}
248

    
249
#console-header {
250
    height: 67px;
251
    background: url("./header-bg.png") repeat-x scroll 0 0 #FFFFFF;
252
}
253

    
254
.header-logo {
255
    padding-top: 19px;
256
}
257

    
258
div#footer-text a {
259
    color: #FFFFFF;
260
    text-decoration: none;
261
}
262

    
263
div#footer-text{
264
    clear: both;
265
    color: #FFFFFF;
266
    font-size: 75%;
267
    left: 22%;
268
    padding-top: 10px;
269
    position: absolute;
270
    width: 700px;
271
}
272

    
273
#footer-bg {
274
    background: url("./footer-bg.png") no-repeat scroll 0 0 #4085A5;
275
    float:right;
276
    width: 700px;
277
    height: 119px;
278
    background-position:right;
279
}
280

    
281
.modal {
282
    background-color:#fff;
283
    display:none;
284
    width:30em;
285
    padding:1em;
286
    text-align:left;
287
}
288

    
289
/* server wizard scrollable root element and network wizard */
290
#wizard, #networks-wizard {
291
    font-size:75%;
292
    height:405px;
293
    width:453px;
294
    overflow:hidden;
295
    position:absolute !important;
296
}
297

    
298
/* scrollable items */
299
#wizard .items {
300
    width:20000em;
301
    clear:both;
302
    position:absolute;
303
    display:block;
304
    padding: 0;
305
    margin: 0;
306
    border:none;
307
    background:none;
308
}
309

    
310
/* single item */
311
#wizard .page, #networks-wizard div.container {
312
    padding: 0px 40px 20px 15px;
313
    width:447px;
314
    float:left;
315
    display:block;
316
    border:none;
317
    background-color: transparent;
318
}
319

    
320
#networks-wizard div.container {
321
    background-color: #ECF4F8;
322
    width:400px;
323
    height: 180px;
324
    margin-bottom:50px;
325
}
326

    
327
/* title */
328
#wizard h2, #networks-wizard h2 {
329
    color: #FF7B24;
330
    font-size: 100%;
331
    font-style: italic;
332
    font-weight: bold;
333
    margin-left: 37px;
334
    margin-top: 17px;
335
}
336

    
337
#networks-wizard h2 {
338
    margin-top: 15px;
339
}
340

    
341
#wizard li {
342
    margin-bottom:1.2em;
343
}
344

    
345
#wizard .pane li {
346
    margin: 0;
347
}
348

    
349
#wizard label {
350
    font-size:120%;
351
    display:block;
352
    clear: both;
353
}
354

    
355
#wizard label strong {
356
    position:relative;
357
    top:-1px;
358
    font-size: 80%;
359
    font-weight: normal;
360
}
361

    
362
#wizard label em {
363
    font-size:75%;
364
    color:#666;
365
    font-style:normal;
366
}
367

    
368
#wizard .text {
369
    width: 270px;
370
    padding: 5px;
371
    margin-top: 10px;
372
    border: 1px solid #ccc;
373
    color: #456;
374
    letter-spacing: 1px;
375
}
376

    
377
#wizard select {
378
    border:1px solid #ccc;
379
    width:94%;
380
    padding:4px;
381
    display: none;
382
}
383

    
384
#wizard .double label {
385
    width:50%;
386
    float:left;
387
}
388

    
389
#wizard .double .text {
390
    width:93%;
391
}
392

    
393
#wizard .clearfix {
394
    clear:left;
395
    padding-top:10px;
396
}
397

    
398
#wizard .right {
399
    float:right;
400
}
401

    
402
#wizard .error {
403
    border:1px solid red;
404
}
405

    
406
#wizard a:hover div.image {
407
    background-color: #C5DEE9;
408
}
409

    
410
.selecteddiv {
411
    background-color: #C5DEE9 !important;
412
}
413

    
414
#wizard label a:hover strong {
415
    color: black;
416
}
417

    
418
#wizard div.image span.size {
419
    font-size: 75%;
420
    color: #666;
421
}
422

    
423
#wizard div.image .radio {
424
    float: left;
425
    margin-top: 10px;
426
}
427

    
428
#wizard div.image span.image-id, #wizard div.image span.description {
429
    font-size: 75%;
430
    color: #666;
431
    font-weight: normal;
432
    display:inline;
433
}
434

    
435
#wizard a:hover div.image span.image-id, #wizard a:hover div.image span.description, #wizard a:hover div.image span.size {
436
    color: black;
437
}
438

    
439
#wizard .cost {
440
    color: #79A4C1;
441
    margin-top: 40px;
442
    clear:both;
443
    margin-left: 15px;
444
    font-size: 95%;
445
}
446

    
447
#wizard #status {
448
    height: 50px;
449
    background-color: #4085A5;
450
}
451

    
452
#wizard .headernumber {
453
    font-size: 410%;
454
}
455

    
456
#wizard .headerbody {
457
    font-size: 120%;
458
    font-weight: normal;
459
    display: inline;
460
    top: -15px;
461
    position: relative;
462
}
463

    
464
#wizard .first {
465
    left: -10px;
466
}
467

    
468
#wizard .checked {
469
    color: #64a6c4 !important;
470
}
471

    
472
#wizard .li-2 {
473
    margin-top: -1px !important;
474
}
475

    
476
#wizard .img-check {
477
    margin-bottom: 8px;
478
    margin-left: -8px;
479
}
480

    
481
#wizard .li-1 .img-check {
482
    margin-left: 2px;
483
}
484

    
485
#wizard .topruler, #networks-wizard .topruler, #wizard .bottomruler, #networks-wizard .bottomruler {
486
    background-color: #CDE2EC;
487
    color: #CDE2EC;
488
    border: 0 none;
489
    height: 4px;
490
    margin-left: -1px;
491
    width: 447px;
492
    margin-bottom: 6px;
493
    margin-top: 4px;
494
}
495

    
496
#wizard .bottomruler, #networks-wizard .bottomruler {
497
    margin-top:6px;
498
}
499

    
500
#networks-wizard .topruler, #networks-wizard .bottomruler {
501
    width: 455px;
502
    float: left;
503
}
504

    
505
#wizard #cancel, #networks-wizard .cancel {
506
    background-color: #4085A5;
507
    border-color: #4085A5;
508
    text-align: center !important;
509
}
510

    
511
#wizard #cancel:hover, #networks-wizard .cancel:hover {
512
    background-color: #7DB4CD;
513
    border-color: #7DB4CD;
514
}
515

    
516
#wizard #start, #networks-wizard .create {
517
    text-align: center;
518
    background-color: #FF6600;
519
    border-color: #FF6600;
520
}
521

    
522
#wizard .img-next {
523
    margin-right: -4px;
524
    padding-left: 8px;
525
    margin-bottom: -1px;
526
}
527

    
528
#wizard .img-prev {
529
    margin-left: -4px;
530
    padding-right: 8px;
531
    margin-bottom: -1px;
532
}
533

    
534
#networks-wizard .create {
535
    float:right;
536
    width: 140px;
537
}
538

    
539
#wizard #start:hover, #networks-wizard .create:hover {
540
    background-color: #FF9651;
541
    border-color: #FF9651;
542
}
543

    
544
#wizard .separator-end {
545
    position: absolute;
546
    background-color: #387693;
547
    height: 5px;
548
    margin-left: -14px;
549
    margin-top: 362px;
550
    width: 550px;
551
}
552

    
553
.page ul {
554
    height: 270px;
555
    overflow: auto;
556
}
557

    
558
.panes ul.pane {
559
    height: 220px;
560
}
561

    
562
#wizard #tabscontainer {
563
    background-color: #CDE2EC;
564
    height: 20px;
565
    width: 448px;
566
}
567

    
568
.page ul.tabs {
569
    overflow: hidden;
570
    height: auto;
571
    margin-bottom: -1px;
572
    margin-top: -1px;
573
}
574

    
575
.page ul.tabs li {
576
    float: right;
577
    margin: 0 0.2em;
578
}
579

    
580
#status li {
581
    float: left;
582
    color: #387693;
583
    padding: 0 1px 0 37px;
584
    bottom: 0px;
585
}
586

    
587
#status li.active .headernumber {
588
    color: #FFFFFF;
589
}
590

    
591
#status li.active .headerbody {
592
    color: #FFFFFF;
593
}
594

    
595
div.image-container {
596
    border-bottom: 1px solid #CCCCCC;
597
    margin-left: 10px;
598
    margin-right: 10px;
599
}
600

    
601
#page2-container {
602
    background-color: #ECF4F8;
603
    height: 193px;
604
    margin-top: 3px;
605
    padding-top: 25px;
606
}
607

    
608
#page3-container {
609
    background-color: #ECF4F8;
610
    height: 245px;
611
    margin-bottom: 32px;
612
    padding-left: 50px;
613
}
614

    
615
/* slider root element */
616
.slider {
617
    border: 1px solid #666;
618
    cursor: pointer;
619
    display: inline !important;
620
    float: left;
621
    margin: 5px 0 20px 10px;
622
    position: relative;
623
    width: 250px;
624
}
625

    
626
.sliders {
627
    float:left;
628
    width: 40px;
629
    margin-left: 10px;
630
    margin-top: 3px;
631
}
632

    
633
.units {
634
    padding-left:10px;
635
}
636

    
637
.slider-container {
638
    padding-bottom: 15px;
639
    margin-left: 5px;
640
}
641

    
642
/* drag handle */
643
.handle {
644
    -moz-box-shadow: 0 0 2px #000000;
645
    background: url("./h30.png") repeat-x scroll 0 0 #FFFFFF;
646
    border: 1px solid #000000;
647
    cursor: move;
648
    display: block;
649
    height: 10px;
650
    margin-top: -8px;
651
    position: absolute;
652
    width: 8px;
653
}
654

    
655
/* progress bar (enabled with progress: true) */
656
.progress {
657
    height: 3px;
658
    background-color: #387693;
659
}
660

    
661
/* the input field */
662
.range {
663
    border: 1px solid #387693;
664
    float: left;
665
    font-size: 100%;
666
    margin: -3px 0 0 15px;
667
    padding: 2px 5px 2px 0;
668
    text-align: right;
669
    width: 50px;
670
}
671

    
672
.selectedrange {
673
    border-color: #5599FF;
674
}
675

    
676
#credits-indicator {
677
    background-color: #ECF4F8;
678
    float: none;
679
    margin: 0 0 0 10px;
680
    border: 1px solid #387693;
681
    color: #387693;
682
}
683

    
684
/* machines */
685
.machine-container {
686
    min-height: 65px;
687
    margin: 2px 0 0 3px;
688
    padding: 0 4px 0;
689
    clear: both;
690
    width: 523px;
691
    position:relative;
692
}
693

    
694
div.machine {
695
    margin-left: -7px;
696
    min-height: 65px;
697
    padding-left: 7px;
698
    padding-right: 5px;
699
    padding-top: 2px;
700
    width: 516px;
701
}
702

    
703
div.machine:hover {
704
    background-color:#A1C8DB !important;
705
}
706

    
707
div.machine.light-background, div.network.light-background {
708
    background-color:#aed2e3;
709
}
710

    
711
.single .light-background {
712
    background-color:#aed2e3;
713
}
714

    
715
.machine a {
716
    font-weight: normal;
717
    text-decoration: none;
718
}
719

    
720
div.machine-details {
721
    width: 400px;
722
    float:left;
723
}
724

    
725
.machine span.name, .machine a.ip {
726
    font-size: 75%;
727
    color: black;
728
    margin-top: 6px;
729
}
730

    
731
.machine span.name {
732
    font-weight: bold;
733
}
734

    
735
.oldValue {
736
    display:none;
737
}
738

    
739
.state {
740
    margin-top: -40px;
741
}
742

    
743
.state div {
744
    text-align: right;
745
    margin-right: 3px;
746
}
747

    
748
/* icon view actions */
749
div.machine div.actions {
750
    float: right;
751
    font-size: 75%;
752
    font-weight: normal;
753
    height: 68px;
754
    position: absolute;
755
    right: -63px;
756
    width: 70px;
757
    top: 0px;
758
}
759

    
760
div.machine div.actions a {
761
    color: transparent;
762
    height: 15px;
763
    width: 180px;
764
    margin: 0 0 2px 8px;
765
    display: block;
766
}
767

    
768
div.machine div.actions a:hover {
769
    background-color:#A1C8DB;
770
    opacity: 0.8;
771
    filter: alpha(opacity = 80);
772
}
773

    
774
div.machine div.actions a.selected {
775
    color: #FF7F2A !important;
776
    width: 50px;
777
}
778

    
779
div.machine div.actions a.selected:hover {
780
    background-color:transparent;
781
}
782

    
783
div.machine div.actions a.action-shutdown {
784
    display: block;
785
}
786

    
787
div.machine div.actions a.shutdown-padding {
788
    margin-bottom: 22px;
789
}
790

    
791
div.action-container {
792
    overflow: visible;
793
}
794

    
795
div.actions a.enabled:hover{
796
    color: black !important;
797
    text-decoration: underline;
798
    display: block;
799
}
800

    
801
div.machine:hover .actions a {
802
    color: black;
803
    display: block;
804
}
805

    
806
div.machine div.display a{
807
    color: black;
808
    display: block;
809
}
810

    
811
div.running div.machine div.actions .disabled {
812
    display: none;
813
}
814

    
815
div.terminated div.machine div.actions .disabled {
816
    display: none;
817
}
818

    
819
div.terminated div.machine div.actions a.action-destroy {
820
    position: absolute;
821
    bottom: 0;
822
}
823

    
824
div.running div.machine div.actions a.action-destroy {
825
    position: absolute;
826
    bottom: 0;
827
}
828

    
829
div.connect-arrow {
830
    background: url(/static/connect-arrow.png) no-repeat;
831
    height: 28px;
832
    width:14px;
833
    position: absolute;
834
}
835

    
836
.machine div.connect-arrow {
837
    display: none;
838
    left: -3px;
839
    position: absolute;
840
    top: 9px;
841
}
842

    
843
div.connect-arrow:hover, div.connect-arrow.border-hover, div.connect-arrow-ie, div.connect-arrow.border-ie {
844
    cursor: pointer;
845
    background: url(/static/connect-arrow-hover.png) no-repeat;
846
    height: 28px;
847
    width:26px;
848
}
849

    
850
div.connect-border {
851
    opacity: 0.8;
852
    filter: alpha(opacity = 80);
853
    background-color:#4fe0c3;
854
    height:28px;
855
    width: 12px;
856
    position: absolute;
857
}
858

    
859
.machine div.connect-border {
860
    display: none;
861
    left: -15px;
862
    position: absolute;
863
    top: 9px;
864
}
865

    
866
.standard .machine img {
867
    float: left;
868
    margin: 4px 14px 0;
869
}
870

    
871
.standard .running .machine img {
872
   cursor: pointer;
873
}
874

    
875
.list .machine img {
876
    margin: 0;
877
}
878

    
879
div.ip, div.ips {
880
    font-size: 75%;
881
    position: relative;
882
    float: right;
883
    top:1px;
884
    right: 18px;
885
}
886

    
887
div.indicators {
888
    margin-right: 2px !important;
889
}
890
div.indicator1, div.indicator2, div.indicator3, div.indicator4 {
891
    background-color: #447821;
892
    width:10px;
893
    height:11px;
894
    clear: none;
895
    float:right;
896
}
897

    
898
.view-separator {
899
    color:#5F8DD3;
900
}
901

    
902
.running {
903
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
904
    margin-top: -76px;
905
    padding-bottom: 15px;
906
    width: 699px;
907
    padding-top: 60px;
908
}
909

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

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

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

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

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

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

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

    
938
.destroying-state .indicator1, .destroying-state .indicator3 {
939
    background-color: #800000;
940
}
941

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

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

    
950
.build-state .indicator1, .build-state .indicator2, .build-state .indicator3, .build-state .indicator4 {
951
    background-color: #5CA1C0;
952
}
953

    
954
.network-indicator .indicator1, .network-indicator .indicator2, .network-indicator .indicator3, .network-indicator .indicator4 {
955
    background-color: #5CA1C0;
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
    position: relative;
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
    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: 20px;
2253
    height: 31px;
2254
    width: 31px;
2255
    position: absolute;
2256
}
2257

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

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

    
2266
/* tables in list view */
2267
div.list div.dataTables_filter {
2268
    font-size: 75%;
2269
    display: none;
2270
    margin-bottom: 12px;
2271
}
2272

    
2273
div.list div.dataTables_filter input{
2274
    font-size: 100%;
2275
}
2276

    
2277
.dataTables_wrapper {
2278
    width: 515px;
2279
    padding-bottom: 40px;
2280
}
2281

    
2282
div.list table thead .sorting, div.list table thead .sorting_desc, div.list table thead .sorting_asc {
2283
    padding-right: 15px !important;
2284
}
2285

    
2286
div.list table {
2287
    width: 515px;
2288
    font-size: 75%;
2289
}
2290

    
2291
div.list table tbody td {
2292
    color: #3D3D3D;
2293
    padding:6px;
2294
    vertical-align: middle;
2295
}
2296

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

    
2311
div.list table thead .sorting_asc, div.list table thead .sorting_desc {
2312
    background-color: #5CA1C0;
2313
}
2314

    
2315
div.list table thead .sorting_asc {
2316
    background-image: url(asc.gif);
2317
}
2318

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

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

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

    
2344
ul.dropdown-selector li {
2345
    padding: 4px;
2346
}
2347

    
2348
ul.dropdown-selector li:hover {
2349
    background-color: #5CA1C0;
2350
}
2351

    
2352
ul.dropdown-selector li a{
2353
    color: black;
2354
    text-decoration: none;
2355
}
2356

    
2357
div.list table span.imagetag {
2358
    display: none;
2359
}
2360

    
2361
div.list table thead .vmos {
2362
    width: 20px !important;
2363
    vertical-align:middle;
2364
}
2365

    
2366
div.list table .selection {
2367
    width: 20px !important;
2368
    text-align: left;
2369
    background-image: none;
2370
    padding-left: 6px;
2371
}
2372

    
2373
div.list table thead .vmflavor {
2374
    width: 100px !important;
2375
}
2376

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

    
2381
div.list table thead .vmstatus {
2382
    width: 50px !important;
2383
}
2384

    
2385
div.list table thead .vmname {
2386
    width: 70px !important;
2387
}
2388

    
2389
.spinner, .wave {
2390
    clear: right;
2391
    float:right !important;
2392
    margin: 10px 6px 0 15px !important;
2393
}
2394

    
2395
#networks-pane .spinner {
2396
    margin-top: 18px !important;
2397
}
2398

    
2399
.hidden {
2400
    display:none;
2401
}
2402

    
2403
div.actions a.selected, div.actions a.selected:hover, div.machine-actions a.selected, div.machine-actions a.selected:hover {
2404
    display:block !important;
2405
}
2406

    
2407
.action_error .message, .action_error .code {
2408
    display: none;
2409
}
2410

    
2411
.fixed {
2412
    bottom: 0;
2413
    position: fixed !important;
2414
}
2415

    
2416
/* Networks */
2417
#networks-pane {
2418
    background-color: transparent;
2419
    color: black;
2420
    margin-left: 1px;
2421
    margin-right: 0;
2422
}
2423

    
2424
#networkscreate {
2425
    color: black;
2426
    background-color: #FF7F2A;
2427
    cursor: pointer;
2428
    padding: 7px 24px;
2429
    text-decoration: none;
2430
}
2431

    
2432
#networkscreate:hover {
2433
    background-color: #FF9955;
2434
}
2435

    
2436
#networks-pane #beforecreate {
2437
    margin-left: -13px;
2438
    margin-top: -6px;
2439
}
2440

    
2441
#networks-container {
2442
    margin-top: 10px;
2443
    min-height: 270px;
2444
}
2445

    
2446
#networks-createcontainer {
2447
    position: absolute;
2448
    top: 155px;
2449
}
2450

    
2451
#networks-pane .public-networks {
2452
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
2453
    margin: 0 0 18px;
2454
    padding: 70px 0 15px 35px;
2455
}
2456

    
2457
#networks-pane .private-networks {
2458
    background: url("./running-bg.png") repeat scroll 0 0 transparent;
2459
    padding: 15px 20px 20px 35px;
2460
}
2461

    
2462
#public-template, #private-template, #public-machine-template, #private-machine-template {
2463
    display:none;
2464
}
2465

    
2466
div.network a.action-network-add {
2467
    display: none;
2468
}
2469

    
2470
div.network a.action-network-destroy {
2471
    margin-top: 38px !important;
2472
    width: 50px;
2473
    display: none;
2474
}
2475

    
2476
div.network {
2477
    clear: both;
2478
    min-height: 65px;
2479
    margin: 5px 0 0 -35px;
2480
    padding: 3px 20px 0;
2481
    width: 480px;
2482
    position: relative;
2483
}
2484

    
2485
#private-template {
2486
    margin: 2px 0 0 -30px;
2487
}
2488

    
2489
div.network-placeholder {
2490
    margin-left: 33px;
2491
}
2492

    
2493
div.private-networks div.network-placeholder {
2494
    border-left: 3px solid #FF7F2A;
2495
}
2496

    
2497
div.network-cable {
2498
    border-left: 3px solid #FF7F2A;
2499
    float: left;
2500
    margin-left: -40px;
2501
    margin-top: -45px;
2502
    height: 185px;
2503
    overflow: hidden;
2504
}
2505

    
2506
.last div.network-cable {
2507
    height:80px !important;
2508
}
2509

    
2510
.first div.network-cable {
2511
    height:155px;
2512
    margin-top:-11px;
2513
}
2514

    
2515
div.firewall-cable {
2516
    border-left: 3px solid #FF7F2A;
2517
    float: left;
2518
    margin-left: -100px;
2519
    margin-top: -20px;
2520
    height: 110px;
2521
}
2522

    
2523
.last div.firewall-cable {
2524
    display:none;
2525
}
2526

    
2527
div.network a:hover {
2528
    text-decoration: underline;
2529
    cursor: pointer;
2530
}
2531

    
2532
#networks-container .name {
2533
    font-size: 75%;
2534
}
2535

    
2536
div.network-machines, div.firewall {
2537
    font-size: 75%;
2538
    margin-left: 70px;
2539
}
2540

    
2541
div.firewall {
2542
    margin-left: 60px;
2543
}
2544

    
2545
div.machines-header, div.firewall-header {
2546
    background-color: #A1C8DB;
2547
    color: white;
2548
    cursor: pointer;
2549
    height: 17px;
2550
    width: 100px;
2551
}
2552

    
2553
 div.private-networks div.machines-header {
2554
    margin-top: -5px;
2555
}
2556

    
2557
div.network:hover div.machines-header, div.network:hover div.firewall-header {
2558
    background-color: #84b7d0;
2559
}
2560

    
2561
div.network-machine:hover div.firewall-header {
2562
    background-color: #5CA1C0;
2563
}
2564

    
2565
div.machines-label, div.firewall-label {
2566
    width: 83px;
2567
    padding-bottom:1px;
2568
    padding-left: 3px;
2569
}
2570

    
2571
div.firewall-label.darker {
2572
    background-color: #4085a5;
2573
}
2574

    
2575
.state {
2576
    float: right;
2577
    position: absolute;
2578
    right: 10px;
2579
    top: 40px;
2580
    font-size: 75%;
2581
}
2582

    
2583
div.network div.actions {
2584
    float: right;
2585
    font-size: 75%;
2586
    font-weight: normal;
2587
    height: 70px;
2588
    width: 100px;
2589
    position: absolute;
2590
    right: -100px;
2591
    top: 0;
2592
}
2593

    
2594
div.network div.machine-actions {
2595
    text-decoration: none;
2596
    float: right;
2597
    width: 100px;
2598
    margin: -7px -100px 0 0;
2599
    font-weight: normal;
2600
    font-size: 75%;
2601
}
2602

    
2603
div.network div.actions a, div.network div.machine-actions a {
2604
    text-decoration: none;
2605
    height: 15px;
2606
    color: transparent;
2607
    display: block;
2608
}
2609

    
2610
div.network div.actions a {
2611
    margin: -2px 0 0 8px;
2612
}
2613

    
2614
div.network div.machine-actions a {
2615
    margin: 0 0 0 8px;
2616
}
2617

    
2618
div.network div.actions a:hover, div.network div.machine-actions a:hover {
2619
    display: block;
2620
    background-color:#A1C8DB;
2621
    width: 200px;
2622
    opacity: 0.8;
2623
    filter: alpha(opacity = 80);
2624
}
2625

    
2626
div.network:hover div.actions a, div.network-machine:hover div.machine-actions a {
2627
    color: black;
2628
}
2629

    
2630
div.network div.actions a.selected, div.network div.machine-actions a.selected {
2631
    color: #FF7F2A !important;
2632
    width: 50px !important;
2633
}
2634

    
2635
div.network div.actions a.selected:hover, div.network div.machine-actions a.selected:hover {
2636
    background-color: transparent;
2637
}
2638

    
2639
div.network div.display a {
2640
    color: black;
2641
    display: block;
2642
}
2643

    
2644
div.network-machine div.machine-actions a.action-details {
2645
    margin-top: 7px;
2646
}
2647

    
2648
div.network:hover {
2649
    background-color: #A1C8DB !important;
2650
}
2651

    
2652
.network-logos {
2653
    float:left;
2654
    padding-right: 10px;
2655
}
2656

    
2657
.network-logos:hover {
2658
    cursor: pointer;
2659
}
2660

    
2661
.state div {
2662
    text-align: right;
2663
    margin: 4px 1px -4px;
2664
}
2665

    
2666
.public-networks .state div {
2667
    margin-top: 4px;
2668
}
2669

    
2670
.private-networks .state div {
2671
    margin-top: 9px;
2672
    margin-bottom: -12px;
2673
}
2674

    
2675
.public-networks .name-div {
2676
    margin-top:-7px;
2677
    margin-bottom: 23px;
2678
}
2679

    
2680
div.indicator {
2681
    clear: none;
2682
    float: right;
2683
    height: 11px;
2684
    margin: 3px -1px;
2685
    width: 10px;
2686
}
2687

    
2688
#private-networks {
2689
    margin-top: 20px;
2690
}
2691

    
2692
.private-networks .editbuttons {
2693
    margin-right: 22%;
2694
}
2695

    
2696
.private-networks div.confirm_single {
2697
    margin: 46px -231px 0 0;
2698
    font-size: 80%;
2699
}
2700

    
2701
.private-networks .network-machine div.confirm_single {
2702
    margin: -8px -210px 0 0;
2703
}
2704

    
2705
span.rename-network, span.configure {
2706
    background-repeat: no-repeat;
2707
    color: transparent;
2708
    font-size: 75%;
2709
    font-weight: normal;
2710
    margin-left: 10px;
2711
    padding-left: 10px;
2712
    text-align: left;
2713
}
2714

    
2715
span.rename-network {
2716
    cursor: pointer;
2717
}
2718

    
2719
div.name-div:hover span.rename-network {
2720
    color: #3D3D3D;
2721
    margin-top: 0.4em;
2722
    background-image: url(./pencil.png);
2723
    background-position: 0 3px;
2724
}
2725

    
2726
div.network:hover a.rename {
2727
    color: #3d3d3d;
2728
}
2729

    
2730
.network-separator {
2731
    background-color: #5CA1C0;
2732
    height: 1px;
2733
    margin: 2px 0 0 -5px;
2734
    width: 480px;
2735
    font-size: 4px;
2736
    line-height: 1px;
2737
}
2738

    
2739
.network-contents {
2740
    margin-left: -4px;
2741
    width: 504px;
2742
    clear: both;
2743
    padding-bottom: 7px;
2744
}
2745

    
2746
.network-machine .state div {
2747
    text-align: left;
2748
}
2749

    
2750
.network-machine {
2751
    margin-left: 35px;
2752
    padding-bottom: 5px;
2753
    padding-left: 5px;
2754
    padding-top: 5px;
2755
    margin-top: 5px;
2756
}
2757

    
2758
.network-machine .logo {
2759
    float:left;
2760
    padding-right: 10px;
2761
    position:relative;
2762
}
2763

    
2764
#networks-container .machine-name {
2765
    text-decoration: none !important;
2766
    margin-bottom: 10px;
2767
    color: #000000;
2768
    margin-top: -4px;
2769
}
2770

    
2771
.network .separator {
2772
    background-color: #5CA1C0;
2773
    height: 1px;
2774
    margin: 11px 0 -5px 5px;
2775
    width: 485px;
2776
}
2777

    
2778
.network-machine .state {
2779
    margin-right: 18px;
2780
}
2781

    
2782
.network-machine .state .status {
2783
    margin-bottom: 4px;
2784
}
2785

    
2786
.machine-name .name {
2787
    margin-top: -10px !important;
2788
}
2789

    
2790
.machine-name .namecontainer {
2791
    line-height: 18px;
2792
    margin-bottom: 20px;
2793
}
2794

    
2795
div.network-machine:hover {
2796
    background-color: #84B7D0;
2797
}
2798

    
2799
.machines {
2800
    width: 416px;
2801
    margin-bottom: -8px;
2802
    margin-top: 10px;
2803
}
2804

    
2805
div.empty-network-slot {
2806
    height: 60px;
2807
}
2808

    
2809
div.network-remove-machine, div.network-add-machine {
2810
    background-color: #FB822F;
2811
    color: #bc4b00;
2812
    width:90px;
2813
    height:21px;
2814
    float:left;
2815
    margin:40px 0 0 -100px;
2816
}
2817

    
2818
span.remove-icon {
2819
    font-size: 80%;
2820
    margin-left: 15px;
2821
}
2822

    
2823
span.add-icon {
2824
    margin-left: 15px;
2825
}
2826

    
2827
span.remove-icon:hover, span.add-icon:hover {
2828
    cursor:pointer;
2829
    color: #fff;
2830
}
2831

    
2832
div.network-add-machine {
2833
    margin:43px 0 0 -3px;
2834
}
2835

    
2836
.firewall-on {
2837
    color: #42E342;
2838
}
2839

    
2840
.firewall-off {
2841
    color: #F82E2E;
2842
}
2843

    
2844
.firewall-content {
2845
    color: black;
2846
    font-size: 60%;
2847
    margin-left: 60px;
2848
    height: 55px;
2849
}
2850

    
2851
.firewall-content .checkbox-legends {
2852
    vertical-align: text-top;
2853
}
2854

    
2855
.checkbox-legends a {
2856
    color: black;
2857
    text-decoration: underline;
2858
    font-size: 100%;
2859
}
2860

    
2861
h5.machine-connect {
2862
    font-size: 75%;
2863
    margin-bottom: 3px;
2864
}
2865

    
2866
.machine-connect span {
2867
    text-decoration: underline;
2868
}
2869

    
2870
h5.machine-connect span:hover {
2871
    cursor: pointer;
2872
}
2873

    
2874
.firewall-apply {
2875
    background-color: #4085a5;
2876
    border: medium none;
2877
    float: right;
2878
    font-size: 105%;
2879
    height: 18px;
2880
    margin-right: 5px;
2881
    margin-top: 3px;
2882
    width: 75px;
2883
}
2884

    
2885
.firewall-apply:hover {
2886
    background-color:#5CA1C0;
2887
}
2888

    
2889
.name-div {
2890
    margin-left: 70px;
2891
    margin-bottom: 20px;
2892
}
2893

    
2894
.machine-name-div {
2895
    margin-bottom: 20px;
2896
    margin-left: 60px;
2897
}
2898

    
2899
div.reboot-dialog {
2900
    display: none;
2901
    color: black;
2902
    background-color: #4085A5;
2903
    font-size: 75%;
2904
    margin-top: 15px;
2905
    width: 698px;
2906
    z-index: 1;
2907
}
2908

    
2909
div#reboot-machine-template, div.reboot-machine-entry {
2910
    display: none;
2911
    padding: 0 0 10px 10px;
2912
    width: 300px;
2913
}
2914

    
2915
div.reboot-dialog p {
2916
    color: #FF7F2A;
2917
    padding: 10px 0 10px 10px;
2918
}
2919

    
2920
div.reboot-dialog button {
2921
    float:right;
2922
    border: 1px solid #FF7F2A;
2923
    background-color: transparent;
2924
    font-size:100%;
2925
}
2926

    
2927
div.reboot-dialog button:hover {
2928
    background-color: #FF7F2A;
2929
}
2930

    
2931
div.reboot-dialog button.reboot-all {
2932
    margin: -30px 35px 0 0;
2933
}
2934

    
2935
div.reboot-dialog button.reboot-single {
2936
    color: black;
2937
    margin-top: -20px;
2938
}
2939

    
2940
div.reboot-dialog div.code, div.reboot-dialog div.action, div.reboot-dialog div.message, div.reboot-dialog button.details {
2941
    display:none;
2942
}
2943

    
2944
div.reboot-dialog button.details {
2945
    border-color: #800000;
2946
    margin-top: -20px;
2947
}
2948

    
2949
div.reboot-dialog button.details:hover {
2950
    background-color: #800000;
2951
}
2952

    
2953
/* Metadata */
2954
.info-content {
2955
    clear: both;
2956
    height: 95px;
2957
    width: 512px;
2958
}
2959

    
2960
.metadata-container {
2961
    line-height: 12px;
2962
    height: 85px;
2963
    background-color: #84b7d0;
2964
}
2965

    
2966
.metadata-column {
2967
    border-right: 1px solid #5CA1C0;
2968
    color: black;
2969
    float: left;
2970
    font-size: 60%;
2971
    margin-top: 3px;
2972
    height: 70px;
2973
    padding-bottom: 5px;
2974
}
2975

    
2976
.vm-stats {
2977
    padding-left: 10px;
2978
    padding-right: 5px;
2979
    width: 119px;
2980
}
2981

    
2982
.vm-details {
2983
    width: 169px;
2984
    margin-left:17px;
2985
}
2986

    
2987
.vm-metadata {
2988
    padding-left: 10px;
2989
    width: 129px;
2990
    border: none;
2991
}
2992

    
2993
.metadata-left {
2994
    float:left;
2995
    width: 50px;
2996
    height: 60px;
2997
}
2998

    
2999
.metadata-right {
3000
    width: 73px;
3001
    float:left;
3002
    height: 35px;
3003
    padding-left: 5px;
3004
    position:relative;
3005
    overflow:hidden;
3006
}
3007

    
3008
.metadata-right .items {
3009
    position:absolute;
3010
    height:20000em;
3011
}
3012

    
3013
.metadata-keys-container {
3014
    height: 60px;
3015
    float: left;
3016
}
3017

    
3018
.single .metadata-keys-container {
3019
    float: none;
3020
    height: 50px;
3021
}
3022

    
3023
.single a.manage-metadata {
3024
    font-size: 80%;
3025
    margin-left:4px;
3026
    color: #383838;
3027
}
3028

    
3029
a.manage-metadata {
3030
    font-size: 100%;
3031
    color: black;
3032
    margin-left:17px;
3033
    text-decoration: underline;
3034
}
3035

    
3036
div.machine a.manage-metadata:hover {
3037
    background-color: transparent;
3038
}
3039

    
3040
.metadata-actions, .scrollable {
3041
    padding-left: 5px;
3042
}
3043

    
3044
.singe .metadata-actions, .single .scrollable {
3045
    font-size: 80%;
3046
    line-height: 12px;
3047
    width: 300px;
3048
}
3049

    
3050
.metadata-actions .prev,  .metadata-actions .next{
3051
    float:left;
3052
    width:29px;
3053
    height:6px;
3054
    cursor: pointer;
3055
}
3056

    
3057
.metadata-actions .prev {
3058
    background: url("./roll-up.png") no-repeat scroll 0 0 transparent;
3059
}
3060

    
3061
.metadata-actions .next {
3062
    background: url("./roll-down.png") no-repeat scroll 0 0 transparent;
3063
}
3064

    
3065
.scrollable {
3066
    position:relative;
3067
    overflow:hidden;
3068
    height: 35px;
3069
    width: 60px;
3070
    margin-bottom:2px;
3071
}
3072

    
3073
.scrollable .items {
3074
    position:absolute;
3075
    height:20000em;
3076
}
3077

    
3078
.metadata-bar {
3079
    float: right !important;
3080
    margin: 1px 7px 0 !important;
3081
}
3082

    
3083
/* single view */
3084
.single {
3085
    color: #383838;
3086
    margin-top: -76px;
3087
    padding-bottom: 10px;
3088
    width: 679px;
3089
}
3090

    
3091
.single .column1 {
3092
    float: left;
3093
    margin: 1px 0 25px 17px;
3094
    width: 140px;
3095
}
3096

    
3097
.single .column1 .state {
3098
    float: left;
3099
    margin-left: 4px;
3100
    padding-bottom: 6px;
3101
    padding-top: 3px;
3102
    position: relative;
3103
    right: 0;
3104
    text-align: center;
3105
    width: 126px;
3106
}
3107

    
3108
.single .column1 .state-label {
3109
    padding-top: 5px;
3110
}
3111

    
3112
.single .column1 .indicators {
3113
    margin-right: 38px !important;
3114
}
3115

    
3116
.single div.connect-arrow {
3117
    margin-left: -17px;
3118
}
3119

    
3120
.single div.connect-border {
3121
    margin-left: -29px;
3122
}
3123

    
3124
.single .single-actions {
3125
    padding-bottom: 4px;
3126
    padding-left: 15px;
3127
    width: 69px;
3128
    float: left;
3129
}
3130

    
3131
.single div.single-action {
3132
    font-size: 80%;
3133
    line-height: 18px;
3134
    text-decoration: none;
3135
    cursor: pointer;
3136
}
3137

    
3138
.single div.single-action:hover {
3139
    background-color:#A1C8DB;
3140
    width: 180px;
3141
    opacity: 0.8;
3142
    filter: alpha(opacity = 80);
3143
}
3144

    
3145
.single div.single-action.selected {
3146
    color: #FF7F2A !important;
3147
    width: 50px !important;
3148
}
3149

    
3150
.single div.single-action.selected:hover {
3151
    background-color:transparent;
3152
}
3153

    
3154
.single div.confirm_single {
3155
    font-size: 80%;
3156
    margin: -19px -115px 0 0;
3157
}
3158

    
3159
.single div.action-container.destroy div.confirm_single {
3160
    margin: -18px -116px 0 0;
3161
    position: relative;
3162
    left: 0px;
3163
}
3164

    
3165
.single div.confirm_single button.no {
3166
    margin-left: -5px;
3167
}
3168

    
3169
.single .spinner, .single .wave {
3170
    margin: 15px 45px 0 0px !important
3171
}
3172

    
3173
.single div.action_error {
3174
    margin: 2px 0px 0 605px !important;
3175
    position: relative;
3176
}
3177

    
3178
.single .column2 {
3179
    background-color: #A1C8DB;
3180
    float: left;
3181
    font-size: 78%;
3182
    line-height: 17px;
3183
    margin: 0 0 20px 5px;
3184
    width: 358px;
3185
}
3186

    
3187
.single .column2 .machine-labels {
3188
    float: left;
3189
    font-size: 90%;
3190
    margin-left: 10px;
3191
    margin-top: 10px;
3192
    width: 125px;
3193
}
3194

    
3195
.single .column2 .machine-details {
3196
    float: right;
3197
    text-align: right;
3198
    font-size: 90%;
3199
    width: 210px;
3200
    margin-right: 10px;
3201
    margin-top: 10px;
3202
}
3203

    
3204
.single .column2 .name, .single .column2 .disk, .single .column2 .image-size, .single .column2 .ipv6 {
3205
    margin-bottom: 13px;
3206
}
3207

    
3208
.single .tags {
3209
    clear: both;
3210
    margin-bottom: 10px;
3211
    margin-left: 10px;
3212
}
3213

    
3214
.single .tags-label {
3215
    float: left;
3216
    padding: 0 5px;
3217
    width: 30px;
3218
}
3219

    
3220
.single .tags-down-arrow {
3221
    background: url("/static/tags-down-arrow.png") no-repeat scroll 1px 7px transparent;
3222
    float: left;
3223
    height: 16px;
3224
    width: 9px;
3225
}
3226

    
3227
.single .tags-header {
3228
    background-color: #84B7D0;
3229
    cursor: pointer;
3230
    height: 16px;
3231
    width: 55px;
3232
}
3233

    
3234
.single .tags-content {
3235
    background-color: #84B7D0;
3236
    clear: both;
3237
    height: 65px;
3238
    padding-bottom: 5px;
3239
    padding-top: 5px;
3240
    width: 300px;
3241
}
3242

    
3243
.single .column3 {
3244
    background-color: #A1C8DB;
3245
    margin-left: 535px;
3246
    position: absolute;
3247
    top: 280px;
3248
    width: 150px;
3249
    overflow: visible;
3250
    padding-bottom: 10px;
3251
}
3252

    
3253
.single .column3 .controls {
3254
    font-size: 80%;
3255
    height: 20px;
3256
    padding-left: 7px;
3257
    padding-right: 7px;
3258
    padding-top: 8px;
3259
}
3260

    
3261
.single .column3 .previous {
3262
    float:left;
3263
    width: 72px;
3264
}
3265

    
3266
.single .column3 .next {
3267
    float: right;
3268
    text-align: center;
3269
    width: 60px;
3270
}
3271

    
3272
.single .column3 .next-label {
3273
    float: right;
3274
    margin-right: 3px;
3275
    margin-top: -2px;
3276
}
3277

    
3278
.single .column3 .next-arrow {
3279
    float: right;
3280
    height: 18px;
3281
    width: 10px;
3282
    background: url("./right-arrow.png") no-repeat scroll 3px 2px transparent;
3283
}
3284

    
3285
.single .column3 .prev-label {
3286
    float: left;
3287
    margin-left: 3px;
3288
    margin-top: -2px;
3289
}
3290

    
3291
.single .column3 .prev-arrow {
3292
    background: url("./left-arrow.png") no-repeat scroll 3px 2px transparent;
3293
    float: left;
3294
    height: 18px;
3295
    width: 10px;
3296
}
3297

    
3298
.single .column3 .separator {
3299
    width: 135px;
3300
    height: 1px;
3301
    background-color: #84B7D0;
3302
    margin: 0 0 0 7px;
3303
    clear: both;
3304
}
3305

    
3306
.single .column3 .servers {
3307
    font-size: 80%;
3308
    line-height: 15px;
3309
    padding-top: 10px;
3310
    text-align: right;
3311
    overflow: visible;
3312
    position: relative;
3313
}
3314

    
3315
.single .column3 .server-name {
3316
    margin-left: 10px;
3317
    padding-right: 5px;
3318
    cursor: pointer;
3319
    padding-bottom: 2px;
3320
}
3321

    
3322
div.single div.column3 div.server-name:hover, .single .column3 .column3-selected {
3323
    background-color: #84B7D0;
3324
    color: white;
3325
    opacity: 0.8;
3326
    padding-left: 9px;
3327
    text-align: left;
3328
    width: 160px;
3329
    filter: alpha(opacity = 80);
3330
    position: relative;
3331
}
3332

    
3333
.single .toggler {
3334
    color: #FFFFFF;
3335
    float: right;
3336
    font-size: 140%;
3337
}
3338

    
3339
.single .single-cpu, .single .single-network {
3340
    float: left;
3341
    height: 100px;
3342
    width: 48%;
3343
}
3344

    
3345
.single .cpu-usage, .single .network-usage {
3346
    padding-bottom: 15px;
3347
    padding-left: 20px;
3348
    padding-top: 15px;
3349
    font-size: 90%;
3350
}
3351

    
3352
.single .cpu-graph, .single .network-graph {
3353
    background-color: #A1C8DB;
3354
    height: 210px;
3355
    margin-left: 20px;
3356
    width: 300px;
3357
}
3358

    
3359
.single .single-image {
3360
    width: 126px;
3361
    margin-bottom: 10px;
3362
    margin-left: 4px;
3363
}
3364

    
3365
.single .column3 .previous, .single .column3 .next {
3366
    cursor: pointer;
3367
    background-color: #84B7D0;
3368
    color: white;
3369
    font-size: 100%;
3370
    height: 15px;
3371
    padding-top: 2px;
3372
}
3373

    
3374
.single .column3 .disabled {
3375
    opacity: 0.5;
3376
    filter: alpha(opacity = 50);
3377
}
3378

    
3379
.single div.lower {
3380
    clear:both;
3381
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
3382
    width: 700px;
3383
    height: 270px;
3384
}
3385

    
3386
.single div.upper {
3387
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
3388
    margin-bottom: 10px;
3389
    min-height: 310px;
3390
    overflow-x: visible;
3391
    overflow-y: auto;
3392
    padding-top: 60px;
3393
    width: 700px;
3394
}
3395

    
3396
/* console css */
3397
.console-header-logo {
3398
    padding-top: 10px;
3399
    margin-left: 30px;
3400
    position: fixed;
3401
}
3402

    
3403
div.console-container {
3404
    margin: 0 0em;
3405
    height: auto;
3406
}
3407

    
3408
#wrapper.console {
3409
    width: auto;
3410
}
3411

    
3412
.console-info {
3413
    font-size:80%;
3414
    color: white;
3415
    float:left;
3416
    position:relative;
3417
    margin: 25px 0 0 480px;
3418
}
3419

    
3420
applet {
3421
    width:100%;
3422
    height:100%;
3423
}
3424

    
3425
div.console-footer {
3426
    /* this is for version 0.5*/
3427
    display: none;
3428
}
3429

    
3430
.console-footer #footer-text{
3431
    float:left;
3432
    left: auto;
3433
    margin-left:30px;
3434
}
3435

    
3436
/* add network wizard (see also #wizard for shared classes) */
3437
#networks-wizard .header {
3438
    background-color: #4085A5;
3439
    height: 56px;
3440
}
3441

    
3442
#networks-wizard div.name-input {
3443
    margin: 75px 0 0 55px;
3444
}
3445

    
3446
#networks-wizard input {
3447
    border: 1px solid #CCCCCC;
3448
    color: #445566;
3449
    letter-spacing: 1px;
3450
    width: 170px;
3451
}
3452

    
3453
#networks-wizard span.help {
3454
    font-style: italic;
3455
    font-size: 80%;
3456
    margin-left: 10px;
3457
}
3458

    
3459
#networks-wizard .separator-end {
3460
    background-color: #387693;
3461
    height: 6px;
3462
    width: 479px;
3463
    margin-left: -13px;
3464
    margin-top: 22px;
3465
}
3466

    
3467
.red {
3468
    color: red;
3469
}
3470

    
3471
/* add server to network wizard (see also #metadata-wizard for shared classes) */
3472
#add-machines-wizard span.machine-name {
3473
    margin-left: 4px;
3474
    vertical-align: text-top;
3475
}
3476

    
3477
#add-machines-wizard img.list-logo {
3478
    margin: 2px 1px 1px;
3479
}
3480

    
3481
.css-panes {
3482
    clear: both;
3483
}
3484

    
3485
.last .firewall-content {
3486
    margin-bottom:13px;
3487
}
3488

    
3489
#pub .last .network-separator {
3490
    display:none;
3491
}
3492

    
3493
.public-networks .empty-network-slot {
3494
    display: none;
3495
}